写在前面的废话：
很久没有更新文章了，这段时间一直忙于项目落地，虽然很忙，但是感觉没有总结，没有提炼的日子，总是让人感觉飘飘忽忽的。
所幸放下一些事，抽出一些时间，把近期的项目做一些整理与记录。也算是阶段性的收拾过去，整装再发吧。
作为程序员嘛，总要整理整理自己的，不管是知识储备，还是项目应用，亦或者生活种种，都要隔一段时间，整理一下，这样心不会乱，回首亦有节点。
序：
今天要讲解的课程是《物联网3D，使用webgl(three.js)与物联网设备监控运维展示》课程之物业基础设施3D运维篇。
首先我们描述一下概念：
物联网3D：物联网相比这些年来，大家都了解很多了，直白的讲，就是万物互联，万物上网。那么这里的物联网3D就是指通过三维可视化的方式展现物联网监控设备。对设备的位置信息，状态信息能一目了然。面向IT设施和资源的一体化综合监控与远程操控方式。通过三维可视化方式展现，解决监控资源繁多、开源工具使用复杂、问题定位困难等问题。
物业基础设施运维：物业基础设施包括了供配电、给排水、梯控、监控视频、暖通空调、门禁道闸、停车场道闸、照明、消防、周界环境等待各大门类，伴随着物业基础设施设备先进性、智能性、复杂性的增加，传统依靠人工巡检 和 主观判断的运维管理方式，以养为先 的维护模式已经不能适应行业快速发展的需要。现有的信息化系统及设备各自为政、相互割裂，对于运维人员的专业技能提出了更高的要求。依靠传统管理方式不仅效率低下，而且容易出错，也造成人工成本的增加，亟需利用智能化技术及手段实现对基础设施设备的智慧化运维管理。
今天我们主要讲述的事three.js(webgl)、3D技术再物业基础设施运维中的展示与应用。
项目目标：基于物联网3D技术，结合开放的IOT中台开放能力，助力物业管理数字化转型，实现基础设施设备的智慧化、可视化运维管理。
技术交流 1203193731@qq.com
交流微信：
如果你有什么要交流的心得 可邮件我
一、项目效果与功能说明：
闲话少叙，我们先看一下最终的实现效果：
1.1 、园区的整体
采用科技蓝底色，数据大屏风格，中间绘以3D大楼效果。道路上用流光效果代替灯光与车流，写实风格与科技感结合。
1.2、设备房列表
点击设备房案例，无缝切换到楼层模式，通过科技蓝楼层方式，简洁明了的展示每个楼层的效果。并且把设备房位置通过精灵模型放置到对应的位置上。
鼠标滑动到设备房时能够展示设备房的名称信息。
1.3、双击设备房，显示设备房内详情
双击设备房，显示设备房内详细信息以及重要设备的实时重要量监控信息。
1.3.1、消防泵房效果
1.3.2、生活泵房效果
1.3.3、配电房效果
1.3.4、双层设备房效果
1.4、楼宇设备 楼宇电表
点击电表按钮，显示楼宇电表排布信息，与设备概览
1.5、电梯监控展示
二、具体实现方式
2.1、首先我们准备场景中需要的模型，本人还是推崇简单模型使用代码建模方式，复杂模型考虑到工作效率，采用第三方载入方式。
2.1.1、准备周边环境模型，这里我们主要还是用代码的方式实现周边环境。
a、最难的流光效果
我们通过改变管道贴图的uv贴图值来实现流光效果，适当改变透明度以及贴图的样式。
[{"show":true,"uuid":"","name":"flowtube_6","objType":"flowTube","points":[{"x":0,"y":300,"z":0},{"x":100,"y":250,"z":100},{"x":100,"y":400,"z":400}],"position":{"x":0,"y":0,"z":0},"scale":{"x":1,"y":1,"z":1},"rotation":[{"direction":"x","degree":0}],"style":{"skinColor":16772846,"imgurl":"../../img/3dImg/right1.png","canvasSkin":{"cwidth":1024,"cheight":128,"cwNub":16,"chNub":2,"cMarginW":0.2,"cMarginH":0.2,"run":true,"speed":8,"fps":40,"direction":"w","forward":"f","bgcolor":"rgba(255, 0, 162, 0.68)","side":2}},"segments":64,"radialSegments":8,"closed":false,"radius":10,"showSortNub":6}]
b、平时项目过程中积累的虚拟楼宇
[{"show":true,"uuid":"","name":"hb_2_11","objType":"Lathe","position":{"x":7418.924,"y":0,"z":1036.092},"points":[{"x":1000,"y":0,"z":0},{"x":1000,"y":2000,"z":0}],"style":{"skinColor":1433087,"imgurl":"../img/3dimg/kehuandimian.png","repeatx":true,"width":1,"repeaty":true,"height":20,"side":2,"opacity":0.3},"segments":1,"radialSegments":4,"closed":true,"phiStart":0.7853981633974483,"phiLength":6.283185307179586,"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1.5,"y":2,"z":1.5},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}]
c、路灯效果
[{"show":true,"uuid":"","name":"dengganWithLight_7","objType":"GroupObj","scale":{"x":1,"y":1,"z":1},"position":{"x":0,"y":0,"z":0},"rotation":[{"direction":"x","degree":0}],"childrens":[{"show":true,"uuid":"","name":"dengganWithLight_7OBJCREN0","objType":"Lathe","position":{"x":0,"y":0,"z":0},"points":[{"x":25,"y":-350,"z":0},{"x":5,"y":-300,"z":0},{"x":5,"y":300,"z":0},{"x":0,"y":300,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/sideLight.jpg","side":2,"opacity":1},"segments":3,"radialSegments":6,"closed":true,"phiStart":0,"phiLength":6.283010774254387,"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dengganWithLight_7OBJCREN1","objType":"Lathe","position":{"x":59.523,"y":354.593,"z":0},"points":[{"x":5,"y":0,"z":0},{"x":6,"y":0,"z":0},{"x":8.5,"y":30,"z":0},{"x":0,"y":30,"z":0}],"style":{"skinColor":2055093,"imgurl":"../../img/3dImg/timg.jpg","side":2,"opacity":1},"segments":3,"radialSegments":6,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":9,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":-1.186823891356144}],"radius":null,"scale":{"x":0.8,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dengganWithLight_7OBJCREN2","objType":"Lathe","position":{"x":58.956,"y":355.784,"z":0},"points":[{"x":5,"y":0,"z":0},{"x":8,"y":30,"z":0},{"x":20,"y":60,"z":0},{"x":8,"y":110,"z":0},{"x":0,"y":112,"z":null}],"style":{"skinColor":2055093,"imgurl":"../../img/3dImg/timg.jpg","side":2,"opacity":1},"segments":12,"radialSegments":6,"closed":true,"phiStart":2.96705972839036,"phiLength":3.490658503988659,"showSortNub":9,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":-1.2217304763960306}],"radius":null,"scale":{"x":0.8,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dengganWithLight_7OBJCREN3","objType":"tube","points":[{"x":0,"y":0,"z":0},{"x":0,"y":5,"z":0},{"x":1,"y":8,"z":0},{"x":5,"y":22,"z":0},{"x":20,"y":40,"z":0},{"x":60,"y":55,"z":0}],"position":{"x":0,"y":300,"z":0},"scale":{"x":1,"y":1,"z":1},"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"style":{"skinColor":15790320,"opacity":1},"segments":5,"radialSegments":6,"closed":false,"radius":5,"showSortNub":7,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"name":"dengganWithLight_7OBJCREN4","objType":"cylinder","radiusTop":20,"radiusBottom":150,"height":500,"segmentsX":24,"segmentsY":0,"openEnded":false,"position":{"x":213.491,"y":140.711,"z":0},"scale":{"x":1.4,"y":1,"z":1},"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0.3490658619074471}],"style":{"skinColor":16776960,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":0},"skin_down":{"skinColor":16777215,"side":1,"opacity":0},"skin_side":{"skinColor":16777131,"opacity":0.3,"imgurl":"../../img/3dImg/camarerange2.png"}}},"showSortNub":11000,"show":true,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dengganWithLight_7OBJCREN5","objType":"Lathe","position":{"x":58.956,"y":355.784,"z":0},"points":[{"x":5,"y":0,"z":0},{"x":8,"y":30,"z":0},{"x":20,"y":60,"z":0},{"x":8,"y":110,"z":0},{"x":0,"y":112,"z":null}],"style":{"skinColor":16764685,"imgurl":"../../img/3dImg/battery-front2.png","repeatx":true,"width":2,"repeaty":true,"height":4,"side":2,"opacity":1},"segments":12,"radialSegments":3,"closed":true,"phiStart":0.17453292519943295,"phiLength":2.792526803190927,"showSortNub":9,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":-1.2217304763960306}],"radius":null,"scale":{"x":0.5,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}],"showSortNub":7}]
c、接下来就是通过各种代码模型的组合，与贴图，产生环境模拟
2.1.2、单体大楼效果
2.1.3、我们同样用代码，写出大楼的样子
模型代码：
{"show":true,"uuid":"","showHelper":false,"name":"SpotLight_1","objType":"SpotLight","shadowCameraNear":"1","shadowCameraFar":"1","shadowCameraFov":"1","targetName":"build_face_1","shadowMapWidth":"1","shadowMapHeight":"1","distance":"20000","intensity":2,"angle":"0.8","color":12189685,"position":{"x":3113.364,"y":68.274,"z":3518.174},"showSortNub":35,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"decay":null,"penumbra":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"floorCase_2","objType":"ExtrudeGeometry","position":{"x":1721.935,"y":0,"z":-3333.343},"style":{"skinColor":16711680,"skin":{"skin_up":{"skinColor":4007695,"side":1,"opacity":1},"skin_down":{"skinColor":16711680,"side":1,"opacity":1},"skin_side":{"skinColor":4007695,"materialType":"Phong","opacity":1,"imgurl":"../img/3dImg/battery-front2.png","repeatx":true,"width":0.01,"repeaty":true,"height":0.01,"envMap":{"name":"skybox","reflectivity":0.5,"refractionRatio":"","combine":""}}}},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":1100,"y":0,"type":"nomal"},{"x":1100,"y":-500,"type":"nomal"},{"x":1080,"y":-500,"type":"nomal"},{"x":1080,"y":-20,"type":"nomal"},{"x":0,"y":-20,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":400,"curveSegments":1,"steps":1,"bevelEnabled":false,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":42,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948963},{"direction":"y","degree":0},{"direction":"z","degree":-1.5707963267948963}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"bigdoor","objType":"ExtrudeGeometry","position":{"x":-1455.257,"y":0,"z":-4122.686},"style":{"skinColor":16711680,"skin":{"skin_up":{"skinColor":10916201,"materialType":"Phong","side":1,"opacity":1},"skin_down":{"skinColor":16711680,"side":1,"opacity":1},"skin_side":{"skinColor":10916201,"materialType":"Phong","opacity":1,"envMap":{"name":"skybox","reflectivity":0.5,"refractionRatio":"","combine":""}}}},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":0,"y":850,"type":"nomal"},{"x":1200,"y":850,"type":"nomal"},{"x":1200,"y":0,"type":"nomal"},{"x":1000,"y":0,"type":"nomal"},{"x":1000,"y":650,"type":"nomal"},{"x":200,"y":650,"type":"nomal"},{"x":200,"y":0,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":200,"curveSegments":1,"steps":1,"bevelEnabled":false,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":42,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"floorCase_4","objType":"ExtrudeGeometry","position":{"x":-2919.105,"y":5.491,"z":-2207.835},"style":{"skinColor":16711680,"skin":{"skin_up":{"skinColor":4007695,"side":1,"opacity":1},"skin_down":{"skinColor":16711680,"side":1,"opacity":1},"skin_side":{"skinColor":4007695,"materialType":"Phong","opacity":1,"imgurl":"../img/3dImg/battery-front2.png","repeatx":true,"width":0.01,"repeaty":true,"height":0.01,"envMap":{"name":"skybox","reflectivity":0.5,"refractionRatio":"","combine":""}}}},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":-600,"y":0,"type":"nomal"},{"x":-600,"y":4150,"type":"nomal"},{"x":-580,"y":4150,"type":"nomal"},{"x":-580,"y":20,"type":"nomal"},{"x":0,"y":20,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":400,"curveSegments":1,"steps":1,"bevelEnabled":false,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":42,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":0.01951278160965857}],"
2.1.3、我们再看看楼层的代码模型
楼层模型比较简单：
使用代码写出一个个楼层平面，然后clone出来，修改位置即可。
2.2、设备房实现
2.2.1、与其它方式一样，还是先写出设备房模型，这一点由于前期项目积累，以及积累了很多设备模型的代码，我们后面项目直接组装复用即可
例如下列设备
水浸：
、
温湿度：
2.2.2、设备房结构我们采用半透明，加上虚拟墙体效果，这样便于操作展示设备信息，看起来也充满科技感，如下：
设备房代码：
[{"show":true,"uuid":"","name":"floor","objType":"cube2","length":20000,"width":20000,"height":1,"x":-27.705,"y":-1500,"z":0,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":65524,"side":1,"opacity":0.3,"imgurl":"../img/3dImg/bg2.png","repeatx":true,"width":20,"repeaty":true,"height":20},"skin_down":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../img/3dImg/bg2.png"},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1},"skin_left":{"skinColor":16777215,"side":1,"opacity":1},"skin_right":{"skinColor":16777215,"side":1,"opacity":1}}},"showSortNub":1,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"show":true,"uuid":"","name":"wall_1_5","objType":"cube2","length":200,"width":200,"height":1000,"x":-2891.08,"y":-990,"z":822.292,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1818615,"side":1,"opacity":1,"imgurl":"../img/3dImg/sideLight.jpg"},"skin_down":{"skinColor":1818615,"side":1,"opacity":1,"imgurl":"../img/3dImg/fw2.jpg"},"skin_fore":{"skinColor":1144729,"side":1,"opacity":1,"imgurl":"../img/3dImg/wall/wall6.jpg"},"skin_behind":{"skinColor":1683168,"side":1,"opacity":1,"imgurl":"../img/3dImg/wall/wall6.jpg"},"skin_left":{"skinColor":1481929,"side":1,"opacity":1,"imgurl":"../img/3dImg/wall/wall6.jpg"},"skin_right":{"skinColor":1212582,"side":1,"opacity":1,"imgurl":"../img/3dImg/wall/wall6.jpg"}}},"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"show":true,"uuid":"","name":"floor_1","objType":"cube2","length":3000,"width":5000,"height":20,"x":-1743.487,"y":-1495.74,"z":-32.764,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1581878,"materialType":"Phong","side":1,"opacity":0.8},"skin_down":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../img/3dImg/bg2.png"},"skin_fore":{"skinColor":1818615,"side":1,"opacity":1},"skin_behind":{"skinColor":1818615,"side":1,"opacity":1},"skin_left":{"skinColor":1818615,"side":1,"opacity":1},"skin_right":{"skinColor":1818615,"side":1,"opacity":1}}},"showSortNub":7,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"show":true,"uuid":"","name":"wall_7","objType":"cube2","length":2500,"width":100,"height":1000,"x":-1704.247,"y":-990,"z":2260.007,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1818615,"side":1,"opacity":1},"skin_down":{"skinColor":1818615,"side":1,"opacity":1},"skin_fore":{"skinColor":1481929,"side":1,"opacity":1},"skin_behind":{"skinColor":1346741,"side":1,"opacity":1},"skin_left":{"skinColor":1481929,"side":1,"opacity":1,"imgurl":"../img/3dImg/wall/wall16.jpg","repeatx":true,"width":5,"repeaty":true,"height":1},"skin_right":{"skinColor":1481929,"side":1,"opacity":1,"imgurl":"../img/3dImg/wall/wall16.jpg","repeatx":true,"width":5,"repeaty":true,"height":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"show":true,"uuid":"","name":"wall_3","objType":"cube2","length":50,"width":4300,"height":1000,"x":-2973.835,"y":-990,"z":73.349,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1818615,"side":1,"opacity":1},"skin_down":{"skinColor":1818615,"side":1,"opacity":1},"skin_fore":{"skinColor":1481929,"side":1,"opacity":1,"imgurl":"../img/3dImg/wall/wall16.jpg","repeatx":true,"width":6,"repeaty":true,"height":1},"skin_behind":{"skinColor":1346741,"side":1,"opacity":1,"imgurl":"../img/3dImg/wall/wall16.jpg","repeatx":true,"width":6,"repeaty":true,"height":1},"skin_left":{"skinColor":1481929,"side":1,"opacity":1},"skin_right":{"skinColor":1481929,"side":1,"opacity":1}}},"showSortNub":1000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"show":true,"uuid":"","name":"wall_4_1","objType":"cube2","length":30,"width":2000,"height":400,"x":-450.415,"y":-1282.653,"z":1204.956,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1818615,"side":0,"opacity":1},"skin_down":{"skinColor":1818615,"side":1,"opacity":1},"skin_fore":{"skinColor":1346741,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"},"skin_behind":{"skinColor":1346741,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"},"skin_left":{"skinColor":1818615,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"},"skin_right":{"skinColor":1818615,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"}}},"showSortNub":6000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"show":true,"uuid":"","name":"door_2","objType":"cube2","length":10,"width":300,"height":700,"x":-438.037,"y":-1128.27,"z":41.403,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":3885386,"side":1,"opacity":1},"skin_down":{"skinColor":3885386,"side":1,"opacity":1},"skin_fore":{"skinColor":4881546,"side":1,"opacity":1,"imgurl":"../img/3dImg/door_left.png"},"skin_behind":{"skinColor":4881546,"side":1,"opacity":1,"imgurl":"../img/3dImg/door_right.png"},"skin_left":{"skinColor":3885386,"side":1,"opacity":1},"skin_right":{"skinColor":3885386,"side":1,"opacity":1}}},"showSortNub":6000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"show":true,"uuid":"","name":"door_1","objType":"cube2","length":10,"width":300,"height":700,"x":-438.541,"y":-1128.27,"z":-258.049,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":3885386,"side":1,"opacity":1},"skin_down":{"skinColor":3885386,"side":1,"opacity":1},"skin_fore":{"skinColor":4881546,"side":1,"opacity":1,"imgurl":"../img/3dImg/door_right.png"},"skin_behind":{"skinColor":4881546,"side":1,"opacity":1,"imgurl":"../img/3dImg/door_left.png"},"skin_left":{"skinColor":3885386,"side":1,"opacity":1},"skin_right":{"skinColor":3885386,"side":1,"opacity":1}}},"showSortNub":6000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"show":true,"uuid":"","name":"wall_4_3","objType":"cube2","length":2500,"width":30,"height":400,"x":-1694.546,"y":-1282.653,"z":-2061.979,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1818615,"side":0,"opacity":1},"skin_down":{"skinColor":1818615,"side":1,"opacity":1},"skin_fore":{"skinColor":1346741,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"},"skin_behind":{"skinColor":1346741,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"},"skin_left":{"skinColor":1818615,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"},"skin_right":{"skinColor":1818615,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"}}},"showSortNub":6000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"show":true,"name":"dev_r_t_l_4_2_1","uuid":"","objType":"plane","width":40,"height":40,"color":16777215,"pic":"../img/3dImg/ltr.png","transparent":true,"opacity":1,"side":2,"materialType":"basic","position":{"x":38.605,"y":-1489.748,"z":-3803.409},"rotation":{"x":0,"y":-1.5707963267948966,"z":0},"scale":{"x":1,"y":1,"z":1},"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"name":"dev_r_t_l_4_2_3","uuid":"","objType":"plane","width":40,"height":40,"color":16777215,"pic":"../img/3dImg/ltr.png","transparent":true,"opacity":1,"side":2,"materialType":"basic","position":{"x":38.605,"y":-1489.748,"z":2367.598},"rotation":{"x":0,"y":1.5707963267948966,"z":0},"scale":{"x":1,"y":1,"z":1},"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"name":"dev_r_t_l_4_2_2_1","uuid":"","objType":"plane","width":40,"height":40,"color":16777215,"pic":"../img/3dImg/ltr.png","transparent":true,"opacity":1,"side":2,"materialType":"basic","position":{"x":962.883,"y":-1397.022,"z":-2307.624},"rotation":{"x":0,"y":-1.5707963267948966,"z":0},"scale":{"x":1,"y":1,"z":1},"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"name":"dev_r_t_l_4_2_4","uuid":"","objType":"plane","width":40,"height":40,"color":16777215,"pic":"../img/3dImg/ltr.png","transparent":true,"opacity":1,"side":2,"materialType":"basic","position":{"x":-38.887,"y":-1489.748,"z":2368.396},"rotation":{"x":0,"y":1.5707963267948966,"z":0},"scale":{"x":1,"y":1,"z":1},"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"name":"dev_r_t_l_4_2_2_2","uuid":"","objType":"plane","width":40,"height":40,"color":16777215,"pic":"../img/3dImg/ltr.png","transparent":true,"opacity":1,"side":2,"materialType":"basic","position":{"x":1040.712,"y":-1397.022,"z":-2307.624},"rotation":{"x":0,"y":-1.5707963267948966,"z":0},"scale":{"x":1,"y":1,"z":1},"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"name":"dev_r_t_l_4_2_2","uuid":"","objType":"plane","width":40,"height":40,"color":16777215,"pic":"../img/3dImg/ltr.png","transparent":true,"opacity":1,"side":2,"materialType":"basic","position":{"x":-40.289,"y":-1489.748,"z":-3803.409},"rotation":{"x":0,"y":-1.5707963267948966,"z":0},"scale":{"x":1,"y":1,"z":1},"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"name":"dev_r_t_l_2","uuid":"","objType":"plane","width":20,"height":20,"color":16777215,"pic":"../img/3dImg/rtl.png","transparent":true,"opacity":1,"side":1,"materialType":"basic","position":{"x":-1175.854,"y":-1248.25,"z":1054.125},"rotation":{"x":0,"y":3.141592653589793,"z":0},"scale":{"x":1,"y":1,"z":1},"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"name":"dev_fsw_3","objType":"cylinder","radiusTop":9,"radiusBottom":8,"height":5,"segmentsX":6,"segmentsY":0,"openEnded":false,"position":{"x":1993.077,"y":2371.117,"z":920.549},"scale":{"x":1,"y":1,"z":1},"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":1.5803607310958254}],"style":{"skinColor":16776960,"skin":{"skin_up":{"skinColor":1447446,"side":1,"opacity":1,"imgurl":"../img/3dImg/fsOutSide.png","repeatx":true,"width":2,"repeaty":true,"height":2},"skin_down":{"skinColor":16777215,"side":0,"opacity":0},"skin_side":{"skinColor":2039583,"side":2,"opacity":1,"imgurl":"../img/3dImg/fsOutSide.png","repeatx":true,"width":3,"repeaty":true,"height":1}}},"showSortNub":20000,"show":true,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"wall_4_2","objType":"cube2","length":30,"width":2000,"height":400,"x":-450.415,"y":-1282.653,"z":1204.956,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1818615,"side":0,"opacity":1},"skin_down":{"skinColor":1818615,"side":1,"opacity":1},"skin_fore":{"skinColor":1346741,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"},"skin_behind":{"skinColor":1346741,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"},"skin_left":{"skinColor":1818615,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"},"skin_right":{"skinColor":1818615,"side":1,"opacity":1,"imgurl":"../img/3dImg/camarerange.png"}}},"showSortNub":6000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"show":true,"uuid":"","name":"DirectionalLight_1","objType":"DirectionalLight","shadowCameraNear":1,"shadowCameraFar":5000,"shadowCameraLeft":-500,"shadowCameraRight":500,"shadowCameraTop":500,"shadowCameraBottom":-500,"shadowMapWidth":1024,"shadowMapHeight":1024,"distance":5000,"targetName":"b_dmfloor_tr_1","intensity":1,"color":16777215,"castShadow":true,"position":{"x":-467.823,"y":2195.573,"z":-1438.749},"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"shadowCameraFov":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":"","decay":null,"showHelper":false},{"show":true,"showHelper":false,"uuid":"","name":"light","objType":"DirectionalLight","shadowCameraNear":1,"shadowCameraFar":5000,"shadowCameraLeft":-5000,"shadowCameraRight":5000,"shadowCameraTop":5000,"shadowCameraBottom":-5000,"shadowMapWidth":1024,"shadowMapHeight":1024,"distance":5000,"targetName":"floor_1","intensity":1,"color":8249855,"castShadow":true,"position":{"x":-1302.064,"y":116.353,"z":1565.179},"showSortNub":579,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"shadowCameraFov":null,"decay":2,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""}]
三、具体实现
3.1、起始页部分重要代码如下
<!DOCTYPE html>
<html style="padding:0px;margin:0px;">
<head>
<title></title>
<meta charset="utf-8" />
<link href="../css/iconfont.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../plugs/layer/layui/css/layui.css" rel="stylesheet" />
<link href="../css/animate.css" rel="stylesheet" />
<script src="../plugs/echarts.min.js"></script>
<link href="../css/index.css" rel="stylesheet" />
<link href="../plugs/jquery.mCustomScrollbar.css" rel="stylesheet" />
<script src="../plugs/jquery-2.2.2.js"></script>
<script src="../plugs/jquery.mCustomScrollbar.js"></script>
<script src="../plugs/layer/layer.js"></script>
<script src="../plugs/layer/laydate/laydate.js"></script>
<script src="../plugs/layer/layui/layui.js"></script>
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-table.css" rel="stylesheet" />
<script src="../plugs/bootstrap-table.js"></script>
<script src="../plugs/bootstrap.js"></script>
<script src="../js/commonFunction.js"></script> <script src="../plugs/three/three.min.js"></script> <script src="../plugs/layui-v2.6.8/layui/layui.js"></script>
<link href="../plugs/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" />
<script src="../js/index.js"></script>
<script src="../js/initPage.js"></script>
<script src="../js/modelBusiness.js"></script>
<script src="../js/config.js"></script>
<script src="../js/webAPI.js"></script>
<script src="../plugs/libs/adapter.min.js"></script>
<script src="../js/webrtcstreamer.js"></script>
</head> <body id="mainBody" onload="threeStart(0);" style="padding:0px;margin:0px;">
<!--onload="threeStart(0);"-->
<script>
if (!Detector.webgl) {
layer.alert("您的浏览器不支持3D功能,请使用支持WebGL的浏览器（例如：chrome浏览器、ie11以上浏览器等）");
}
</script>
<audio id="musicfx" style="display:none;">
<source src="../img/alarm.WAV" type="audio/mpeg">
</audio>
<div id="dataCanvasList" style="position:absolute;z-index:-1;display:none;width:5px;height:5px;overflow:auto;"><div style="width:10px;height:10px;float:left;position:relative;"></div></div>
<div id="canvas-frame" class="canvas_frame"></div>
<div class="mainFloor_left" id="floorsBtn"> </div>
<div class="main-right">
<div class="contentRight" id="chart_index" style="height:100%;display:none;">
<div class="chatData" id="dataCenterRightContent" style="height:calc(100% - 20px)">
<div class="block-header">
<div class="container">
<div>
<div class="left">
<div class="left__bg"></div>
</div>
<div class="right">
<div class="right__bg1"></div>
<div class="right__bg2"></div>
<div class="right__bg3"></div>
</div>
</div>
</div>
<img class="icon" src="../img/block-header-arrow.png" />
<div class="title" v-text="title">设备总览</div>
</div>
<div class="chatContent" id="index_chart" style="height:130px"></div>
<div class="chatContent" id="index_1" style="height:calc(100% - 170px); margin-top:10px; overflow-y: auto;">
</div>
</div>
</div>
<div class="contentRight" id="chart_door" style="display:none;">
<div class="chatData">
<div class="block-header">
<div class="container">
<div>
<div class="left">
<div class="left__bg"></div>
</div> <div class="right">
<div class="right__bg1"></div>
<div class="right__bg2"></div>
<div class="right__bg3"></div>
</div>
</div>
</div>
<img class="icon" src="../img/block-header-arrow.png" />
<div class="title" v-text="title">智能门禁系统</div>
</div> <div class="chatContent" id="door_1"></div>
</div>
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
楼层设备总览
</div>
</div>
<div class="chatContent" id="door_2">
<div class="doorLi_Div">
<div class="doorLi_DivTop"> <font class="doorLi_DivTopName">3号梯</font>
<font class="doorLi_DivTopState">在线</font>
</div>
<div class="doorLi_DivBottom">
<img class="doorLi_DivBottomImg" src="../img/pics/icons/doorPic.png" />
<div class="doorLi_divBtn1">
<font style="float:left;">门禁开关：</font>
<div class="doorLi_openClose">开</div>
</div>
<div class="doorLi_divBtn2">
查看进出记录
</div>
</div>
</div>
</div>
</div> </div> <div class="contentRight" id="chart_video" style="display:none;">
<div class="chatData">
<div class="block-header">
<div class="container">
<div>
<div class="left">
<div class="left__bg"></div>
</div> <div class="right">
<div class="right__bg1"></div>
<div class="right__bg2"></div>
<div class="right__bg3"></div>
</div>
</div>
</div>
<img class="icon" src="../img/block-header-arrow.png" />
<div class="title" v-text="title">视频系统</div>
</div> <div class="chatContent" id="video_1"></div>
</div>
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
楼层设备总览
</div>
</div>
<div class="chatContent" id="video_2"> </div>
</div> </div> <div class="contentRight" id="chart_TV" style="display:none;">
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
信息发布系统
</div>
</div>
<div class="chatContent" id="TV_1"></div>
</div>
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
楼层设备总览
</div>
</div>
<div class="chatContent" id="TV_2">
<div class="TVLi_Div">
<div class="TVLi_DivTop">
<font class="TVLi_DivTopName">3号梯</font>
<font class="TVLi_DivTopState">在线</font>
</div>
<div class="TVLi_DivBottom">
<img class="TVLi_DivBottomImg" src="../img/pics/icons/tvPic.png" />
<div class="TVLi_divBtn1">
<font style="float:left;">设备开关：</font>
<div class="TVLi_openClose">开</div>
</div> <div class="TVLi_divBtn3">
<table style="width:100%;">
<tr>
<td>
<img src="../img/pics/icons/voiceBtn2.png" style="width:25px;height:25px;" />
</td>
<td>
<img src="../img/pics/icons/restartBtn2.png" style="width:25px;height:25px;" />
</td>
</tr>
<tr><td>设置音量</td><td>设备重启</td></tr>
</table>
</div> <div class="TVLi_divBtn2">
查看发布内容
</div>
</div>
</div>
</div>
</div> </div>
<div class="contentRight" id="chart_lift" style="display:none;">
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
智能电梯系统
</div>
</div>
<div class="chatContent" id="lift_1"></div>
</div>
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
电梯内实时监控
</div>
</div>
<div class="chatContent" id="lift_2">
<!--<table style="width:360px;margin-left:40px;">
<tr>
<td>
<video id="lift_video1" muted playsinline controls style="width:360px; height:240px;"></video>
<div class="indexVideoContent" style="width:360px;">
<font id="lift_video1_title" class="indexVideoTitle">电梯实时监控1</font>
</div>
</td>
</tr>
<tr>
<td>
<video id="lift_video2" muted playsinline controls style="width:360px; height:240px;"></video>
<div class="indexVideoContent" style="width:360px;">
<font id="lift_video2_title" class="indexVideoTitle">电梯实时监控2</font>
</div>
</td>
</tr>
</table>--> <div class="liftLi_Div">
<div class="liftLi_DivTop"> <font class="liftLi_DivTopName" id="lift_title_1">1号梯</font>
<font class="liftLi_DivTopState">在线</font>
</div>
<div class="liftLi_DivBottom">
<img class="liftLi_DivBottomImg" src="../img/pics/icons/liftPic.png" />
<img class="liftLi_DivBottomImgState" src="../img/pics/icons/liftUp.png" /> <font class="liftLi_DivBottomFloor">8<font class="liftLi_DivBottomFloorUnit"> F</font></font>
<div class="liftLi_divBtn1" id="lift_showVideoBtn_1" onclick="indexPage.showVideoWin(0)">
查看电梯监控
</div>
<div class="liftLi_divBtn2">
查看使用记录
</div>
</div>
</div>
<div class="liftLi_Div">
<div class="liftLi_DivTop">
<font class="liftLi_DivTopName" id="lift_title_2">2号梯</font>
<font class="liftLi_DivTopState">在线</font>
</div>
<div class="liftLi_DivBottom">
<img class="liftLi_DivBottomImg" src="../img/pics/icons/liftPic.png" />
<img class="liftLi_DivBottomImgState" src="../img/pics/icons/liftUp.png" /> <font class="liftLi_DivBottomFloor">8<font class="liftLi_DivBottomFloorUnit"> F</font></font>
<div class="liftLi_divBtn1" onclick="indexPage.showVideoWin(1)">
查看电梯监控
</div>
<div class="liftLi_divBtn2">
查看使用记录
</div>
</div>
</div>
</div>
</div> </div>
<div class="contentRight" id="chart_fire" style="display:none;">
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
智慧消防系统
</div>
</div>
<div class="chatContent" id="fire_1"></div>
</div>
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
楼层设备总览
</div>
</div>
<div class="chatContent" id="fire_2">
<div class="fireLi_Div">
<div class="fireLi_DivTop"> <font class="fireLi_DivTopName">3号梯</font>
<font class="fireLi_DivTopState">在线</font>
</div>
<div class="fireLi_DivBottom">
<img class="fireLi_DivBottomImg" src="../img/pics/icons/fireControlPic.png" /> <div class="fireLi_divBtn2">
查看报警记录
</div>
<div class="fireLi_divBtn1">
<font style="float:left;">位置：检验科门口</font>
</div>
</div>
</div>
</div>
</div> </div> <div class="contentRight" id="chart_environment" style="display:none;">
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
环境监测系统
</div>
</div>
<div class="chatContent" id="environment_1"></div>
</div>
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
楼层设备总览
</div>
</div>
<div class="chatContent" id="environment_2"> <div class="fireLi_Div">
<div class="fireLi_DivTop">
<font class="fireLi_DivTopName" title=""></font>\
<font class="fireLi_DivTopState"></font>
</div>
<div class="fireLi_DivContent">
<div class="fireLi_DivMete">
<div class="fireLi_DivMeteName">
温度：
</div>
<div class="fireLi_DivMeteValue">
26.5℃
</div>
</div> </div>
<div class="fireLi_DivBottom">
<div class="fireLi_divBtn1">
<font style="float:left;">位置：</font>
<font style="float:left;">啊是犯法的事</font>
</div>
<div class="fireLi_divBtn2" onclick="indexPage.showEDevAlarmListByDev()">
查看报警记录
</div>
</div>
</div> </div>
</div> </div>
<div class="contentRight" id="chart_radio" style="display:none;">
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
智能广播系统
</div>
</div>
<div class="chatContent" id="radio_1"></div>
</div>
<div class="chatData">
<div class="block-header">
<div class="container"><div><div class="left"><div class="left__bg"></div></div><div class="right"><div class="right__bg1"></div><div class="right__bg2"></div><div class="right__bg3"></div></div></div></div><img class="icon" src="../img/block-header-arrow.png" /><div class="title" v-text="title">
楼层设备总览
</div>
</div>
<div class="chatContent" id="radio_2"> </div>
</div> </div>
</div>
<div id="fourBtns" class="btns_four">
<div id="indexBtn" class="btn_li action">主楼</div>
<div id="sbfBtn" class="btn_li">设备房</div>
<div id="xzldbBtn" class="btn_li">写字楼电表</div>
<div id="xfmdylBtn" class="btn_li">消防末端压力</div>
<!--<div id="ltxtBtn" class="btn_li">冷通系统</div>-->
</div> <div id="dataCeneterDiv" style="display:none;">
<div class="chatData" style="width:100%;margin-top:20px;background-color:rgba(3, 24, 56, 0);">
<div class="block-header">
<div class="container" style="width:94% !important">
<div>
<div class="left">
<div class="left__bg"></div>
</div>
<div class="right">
<div class="right__bg1"></div>
<div class="right__bg2"></div>
<div class="right__bg3"></div>
</div>
</div>
</div>
<img class="icon" src="../img/block-header-arrow.png" />
<div class="title" id="roomname" v-text="title">数据中心</div>
</div>
<div class="exitBtn" id="room_exitBtn">
关闭
</div>
<div id="iframe_dataCenterContent" class="chatContent" style="width:100%;">
<iframe style="width:100%;border:0px solid black;height:100%;" id="iframe_bpd"></iframe>
</div>
</div>
</div> <div id="peidianshi" style="display:none;">
<div class="chatData" style="width:1030px;margin-top:20px;background-color:rgba(3, 24, 56, 0.64);">
<div class="block-header">
<div class="container" style="width:100% !important;">
<div>
<div class="left">
<div class="left__bg"></div>
</div>
<div class="right">
<div class="right__bg1"></div>
<div class="right__bg2"></div>
<div class="right__bg3"></div>
</div>
</div>
</div>
<img class="icon" src="../img/block-header-arrow.png" />
<div class="title" v-text="title">变配电系统</div>
</div>
<div id="iframe_bpdContent" class="chatContent" style="width:1030px;">
<iframe style="width:100%;border:0px solid black;height:600px;" id="iframe_bpd"></iframe>
</div>
</div>
</div> <div id="jpaishui" style="display:none;">
<div class="chatData" style="width:980px;margin-top:20px;background-color:rgba(3, 24, 56, 0.64);">
<div class="block-header">
<div class="container" style="width:980px !important;">
<div>
<div class="left">
<div class="left__bg"></div>
</div>
<div class="right">
<div class="right__bg1"></div>
<div class="right__bg2"></div>
<div class="right__bg3"></div>
</div>
</div>
</div>
<img class="icon" src="../img/block-header-arrow.png" />
<div class="title" v-text="title">给排水系统</div>
</div>
<div id="waterCotent" class="chatContent" style="width:980px;height:700px;overflow-x:hidden;overflow-y:auto;"> </div>
</div>
</div>
<div id="songfeng" style="display:none;">
<div class="chatData" style="width:970px;margin-top:20px;background-color:rgba(3, 24, 56, 0.64);">
<div class="block-header">
<div class="container" style="width:970px !important;">
<div>
<div class="left">
<div class="left__bg"></div>
</div>
<div class="right">
<div class="right__bg1"></div>
<div class="right__bg2"></div>
<div class="right__bg3"></div>
</div>
</div>
</div>
<img class="icon" src="../img/block-header-arrow.png" />
<div class="title" v-text="title">送排风系统</div>
</div>
<div class="chatContent" id="songfengContent" style="width:970px;padding:20px;max-height:640px;overflow-y:scroll;overflow-x:hidden;"> </div>
</div>
</div>
<div id="alarmsList" style="display:none;">
<div class="chatData" style="width:700px;margin-top:20px;background-color:rgba(3, 24, 56, 0.64);">
<div class="block-header">
<div class="container" style="width:700px !important;">
<div>
<div class="left">
<div class="left__bg"></div>
</div>
<div class="right">
<div class="right__bg1"></div>
<div class="right__bg2"></div>
<div class="right__bg3"></div>
</div>
</div>
</div>
<img class="icon" src="../img/block-header-arrow.png" />
<div class="title" v-text="title">设备报警列表</div>
</div>
<div class="chatContent" style="width:700px;">
<!--<table id="alarmTable"></table>-->
<div style="width:680px; margin-left:10px; height:600px;overflow-y:scroll" id="AlarmListResult"> </div>
</div>
</div>
</div> <div id="doorEventList" style="display:none;">
<div class="chatData" style="width:700px;margin-top:20px;background-color:rgba(3, 24, 56, 0.64);">
<div class="block-header">
<div class="container" style="width:700px !important;">
<div>
<div class="left">
<div class="left__bg"></div>
</div>
<div class="right">
<div class="right__bg1"></div>
<div class="right__bg2"></div>
<div class="right__bg3"></div>
</div>
</div>
</div>
<img class="icon" src="../img/block-header-arrow.png" />
<div class="title" v-text="title">门禁记录查询</div>
</div>
<div class="chatContent" style="width:700px;">
<div id="doorSearchDiv">
<table style="color:white !important;margin-left:10px;">
<tr>
<td>查询条件：</td>
<td style="width:145px;"><input id="doorEventStartTime" placeholder="yyyy-MM-dd HH:mm:ss" style="float:left;width:140px;height:28px; font-size:14px; text-align:center;line-height:28px;color:white;background-color:rgba(0,0,0,0) !important;color:#32C5FF !important;border:1px solid #32C5FF;" /></td>
<td style="width:20px;">至</td>
<td style="width:145px;"><input id="doorEventEndTime" placeholder="yyyy-MM-dd HH:mm:ss" style="float:left;width:140px;height:28px; font-size:14px; text-align:center;line-height:28px;color:white;background-color:rgba(0,0,0,0) !important;color:#32C5FF !important;border:1px solid #32C5FF;" /></td>
<td style="width:100px;">
<input type="hidden" id="doorDevicecSn" value="" />
<!--<select style="float:left;width:80px;height:28px; font-size:14px; text-align:center;line-height:28px;color:white;background-color:rgba(0,0,0,0) !important;color:#32C5FF !important;border:1px solid #32C5FF;">
<option>授权</option>
</select>-->
</td>
<td style="width:100px;">
<div id="searchDoorEventBtn" style=" float:left;width:80px;height:28px; background-image: linear-gradient(to right, #024D9E , #09FDFF);border-radius:2px;font-size:14px; text-align:center;line-height:28px;color:white;cursor:pointer;">
查 询
</div>
</td>
<td style="width:100px;">
<div id="exitDoorEventBtn" class="divBtn" style="width:80px;height:28px;line-height:28px; ">
退出
</div>
</td>
</tr>
</table> </div>
<div style="width:680px; margin-left:10px; height:500px;overflow-y:scroll" id="doorEventListResult"> </div>
</div>
</div>
</div> <div id="devAllMeteList" style="display:none;">
<div class="chatData" style="width:700px;margin-top:20px;background-color:rgba(3, 24, 56, 0.64);">
<div class="block-header">
<div class="container" style="width:700px !important;">
<div>
<div class="left">
<div class="left__bg"></div>
</div>
<div class="right">
<div class="right__bg1"></div>
<div class="right__bg2"></div>
<div class="right__bg3"></div>
</div>
</div>
</div>
<img class="icon" src="../img/block-header-arrow.png" />
<div class="title" v-text="title" id="devTitle">设备量</div>
</div>
<div class="chatContent" style="width:700px;">
<div style="width:680px; margin-left:10px;margin-top:15px; height:500px;overflow-y:scroll" id="devMeteListResult"> </div>
</div>
</div>
</div>
<div id="devAlarmList" style="display:none;">
<div class="chatData" style="width:700px;margin-top:20px;background-color:rgba(3, 24, 56, 0.64);">
<div class="block-header">
<div class="container" style="width:700px !important;">
<div>
<div class="left">
<div class="left__bg"></div>
</div>
<div class="right">
<div class="right__bg1"></div>
<div class="right__bg2"></div>
<div class="right__bg3"></div>
</div>
</div>
</div>
<img class="icon" src="../img/block-header-arrow.png" />
<div class="title" v-text="title">报警记录查询</div>
</div>
<div class="chatContent" style="width:700px;">
<div id="doorSearchDiv">
<table style="color:white !important;margin-left:10px;">
<tr>
<td>查询条件：</td>
<td style="width:155px;"><input id="alarmStartTime" placeholder="yyyy-MM-dd HH:mm:ss" style="float:left;width:150px;height:28px; font-size:14px; text-align:center;line-height:28px;color:white;background-color:rgba(0,0,0,0) !important;color:#32C5FF !important;border:1px solid #32C5FF;" /></td>
<td style="width:20px;">至</td>
<td style="width:155px;"><input id="alarmEndTime" placeholder="yyyy-MM-dd HH:mm:ss" style="float:left;width:150px;height:28px; font-size:14px; text-align:center;line-height:28px;color:white;background-color:rgba(0,0,0,0) !important;color:#32C5FF !important;border:1px solid #32C5FF;" /></td>
<td style="width:80px;">
<select id="alarmDevSort" style="float:left;width:60px;height:28px; font-size:14px; text-align:center;line-height:28px;color:white;background-color:rgba(0,0,0,0) !important;color:#32C5FF !important;border:1px solid #32C5FF;">
<option value="1">升序</option>
<option value="2">降序</option>
</select>
<input type="hidden" id="selectEAlarmDevid" />
</td>
<td style="width:100px;">
<div id="searchDevAlarmBtn" style=" float:left;width:80px;height:28px; background-image: linear-gradient(to right, #024D9E , #09FDFF);border-radius:2px;font-size:14px; text-align:center;line-height:28px;color:white;cursor:pointer;">
查 询
</div>
</td>
<td style="width:100px;">
<div id="exitDevAlarmBtn" class="divBtn" style="width:80px;height:28px;line-height:28px; ">
退出
</div>
</td>
</tr>
</table> </div>
<div style="width:680px; margin-left:10px;margin-top:15px; height:500px;overflow-y:scroll" id="devAlarmListResult">
</div>
</div>
</div>
</div>
</body> <script>
$(document).ready(function () {
if (window.parent.loadingClose3DFun) {
window.parent.loadingClose3DFun();
}
showLoading(100, config.BuildCameraPosition, config.BuildCameraTarget, null, function () {
modelBussiness.init();
},3000);
}); </script>
</html>
3.2、业务逻辑部分重要代码与讲解如下
function ModelBussiness() {
this.currentAnimationState = 0;
this.functionState = "";//功能状态
this.currentSelectFloor =-1;
}
ModelBussiness.prototype.init = function (roomName) {
//悬停回调
WT3DObj.mouseOverCallBack = this.mouseOverCallBack;
//进入回调
WT3DObj.mouseOverInCallBack = this.mouseOverInCallBack;
//离开回调
WT3DObj.mouseOverLeaveCallBack = this.mouseOverLeaveCallBack;
//悬停触发时间长度
WT3DObj.mouseOverTimeLong = 1000;
this.hideHelpModels();
this.autoRunRotation = true;
// modelBussiness.UnrealBoom(1,1.2,0.83, 0.42)
}
//双击选中
ModelBussiness.prototype.dbClickSelect = function (_sobj, _face,objs,_floor) {
console.log(_sobj);
var _this = this;
if (_sobj.name.indexOf("_room_") >= 0) {
var roomName = _sobj.name.split("_")[4];
$("#roomname").html(roomName);
var roomid = _sobj.name.split("_")[3];
layer.open({
type: 1,
shade: 0.8,
skin: 'myLayer',
title: false,
area: [($(window).width() - 20) + "px", ($(window).height() - 20) + "px"],
content: $('#dataCeneterDiv'),
cancel: function () {
$("#iframe_dataCenterContent").html('');
if (window.parent.iframeOpenHeaderFun) {
window.parent.iframeOpenHeaderFun();
}
$("#chart_index").show();
},
success: function () {
if (window.parent.iframeCloseHeaderFun) {
window.parent.iframeCloseHeaderFun();
}
$("#chart_index").hide();
$("#iframe_dataCenterContent").html('<iframe src="room.html?roomId=' + roomid + '" style="width:100%;border:0px solid black;height:' + ($(window).height() - 80) + 'px" id="iframe_bpd"></iframe>')
}
});
}
}
ModelBussiness.prototype.addVitureDev = function (menuType) {
if (modelBussiness.tempNameList && modelBussiness.tempNameList.length > 0) {
$.each(modelBussiness.tempNameList, function (_i, _o) {
WT3DObj.destoryObj(_o);
});
modelBussiness.tempNameList = [];
}
this.functionState = menuType;
//layer.load();
switch (menuType) {
case "xfmdyl":
case "xzldb":
case "rooms":
case "door":
case "environment"://环境
case "aircontrol"://空调
case "radio"://广播
case "fire":
case "TV":
case "video": {
WT3DObj.commonFunc.changeCameraPosition({ x: 8026.832919779723, y: 11410.537277765132, z: 8678.638422438804 }, { x: 556.4874673700924, y: 4427.39332904184, z: -494.69977246193355 }, 200,
function () {
modelBussiness.vAllModel(function () {
modelBussiness.showAllVisuFloor();
layer.closeAll();
});
});
}
break;
case "lift"://电梯
{
modelBussiness.showLiftModel();
$.each(modelBussiness.tempNameList, function (_i, _o) {
WT3DObj.destoryObj(_o);
});
modelBussiness.tempNameList = [];
}
break;
case "ltxt": {
modelBussiness.showAllBuild(function () {
WT3DObj.commonFunc.changeCameraPosition({x: 4187.131036680923, y: 5464.426260502498, z: 2030.4192806797732},
{ x: 1043.3158032062647, y: 2641.232605326482, z: -499.18168864866135 }, 1000,
function () {
layer.closeAll();
});
});
}
break;
case "index":
case "back"://
{
modelBussiness.showAllBuild(function () {
layer.closeAll();
});
}
break;
}
}
ModelBussiness.prototype.showAllVisuFloor = function () {
var _this = this;
this.showFloors(function () {
$.each(modelBussiness.tempNameList, function (_i, _o) {
WT3DObj.destoryObj(_o);
});
// webapi.getPositionData(modelBussiness.functionState, -1, function (data)
{
var data = modelList[modelBussiness.functionState].data;
modelBussiness.tempNameList = [];
$.each(data, function (_index, _obj) {
if (_obj.show == false) {
} else {
var floor = _obj.floor;
var floorHeight = modelBussiness.getFloorHeigth(floor) + 10;
var name = "devLogo_" + _this.functionState + "_" + _obj.type+"_" + _obj.id + "_" + _obj.name;
modelBussiness.tempNameList.push(name);
var iconimg = _obj.icon ? _obj.icon : modelList[_this.functionState].icon;
modelBussiness.commonFunc.addDevMark(name, { x: _obj.x, y: floorHeight, z: _obj.z }, iconimg, modelList[_this.functionState].iconSize);
}
})
}
//);
});
}
ModelBussiness.prototype.showAllBuild = function (callBack) {
var _this = this;
_this.hideHelpModels();
_this.showAllModel(function () {
var xrange = { x: 1 }
new TWEEN.Tween(xrange).to({
x: 1.1
}, 1500).onUpdate(function () {
// modelBussiness.params.exposure = this.x;
}).onComplete(function () {
new TWEEN.Tween(xrange).to({
x: 1
}, 2000).onUpdate(function () {
// modelBussiness.params.exposure = this.x;
}).onComplete(function () {
if (callBack) {
callBack();
}
}).start();
}).start();
});
}
//掀开你的头盖骨
ModelBussiness.prototype.hideTopFloorsModel = function (floorNub) {
var floors=[
["F1_B3"],//-3
["F1_B2"],
["F1_B1"],
["F1_1", "F3_1"],//1
["F1_2", "F3_2"],//2
["F1_3", "F3_3"],//3
["F1_4", "F3_4"],//4
["F1_5", "F3_5"],//5
]
for (var i = 6; i <= 42;i++){
floors.push(["F2_" + i, "F3_" + i]);
}
floors.push(["F2_43"]);
floors.push(["F2_44"]);
$.each(WT3DObj.scene.children, function (_index, _obj) {
if (!_obj.oldPositionY && _obj.oldPositionY != 0) {
_obj.oldPositionY = _obj.position.y;
_obj.visible = true;
}
});
if (floorNub == 0) {
var floorNames = [];
$.each(floors, function (_findex, _fobj) {
floorNames = floorNames.concat(_fobj);
});
var models = WT3DObj.commonFunc.findObjectsByNames(floorNames);
$.each(models, function (_findex, _fobj) {
if (_fobj.oldPositionY || _fobj.oldPositionY == 0) {
_fobj.position.y = _fobj.oldPositionY;
_fobj.visible = true;
}
});
} else {
var floorNames = [];
$.each(floors, function (_findex, _fobj) {
if (_findex-2 > floorNub ) {
floorNames = floorNames.concat(_fobj);
}
});
var bootomNames = [];
$.each(floors, function (_findex, _fobj) {
if (_findex-2 <= floorNub) {
bootomNames = bootomNames.concat(_fobj);
}
});
var bottommodels = WT3DObj.commonFunc.findObjectsByNames(bootomNames);
$.each(bottommodels, function (_findex, _fobj) {
if (_fobj.oldPositionY || _fobj.oldPositionY == 0) {
_fobj.position.y = _fobj.oldPositionY;
_fobj.visible = true;
}
});
var movemodes = [];
var topmodels = WT3DObj.commonFunc.findObjectsByNames(floorNames);
$.each(topmodels, function (_findex, _fobj) {
if (!_fobj.oldPositionY&& _fobj.oldPositionY!= 0) {
_fobj.oldPositionY = _fobj.position.y;
}
if (_fobj.position.y > _fobj.oldPositionY) {
_fobj.position.y = 10000 + _fobj.oldPositionY;
_fobj.visible = false;
} else {
movemodes.push(_fobj);
}
});
if (movemodes) {
var yR = {y:0}
new TWEEN.Tween(yR).to({
y: 10000
}, 500).onUpdate(function () {
var _thisx=this;
$.each(movemodes, function (_findex, _fobj) {
_fobj.position.y = _fobj.oldPositionY + _thisx.y;
});
}).onComplete(function () {
$.each(movemodes, function (_findex, _fobj) {
_fobj.position.y = 10000 + _fobj.oldPositionY;
_fobj.visible = false;
});
}).start();
}
}
}
ModelBussiness.prototype.showFloorDev = function (floorNub, type)
{
floorNub = parseInt(floorNub);
var models = WT3DObj.commonFunc.findObjectsByNames(modelBussiness.tempNameList);
this.hideTopFloorsModel(floorNub);
if (floorNub == 0) {
$.each(models, function (_index, _obj) {
_obj.visible = true;
});
WT3DObj.commonFunc.changeCameraPosition({ x: 4911.210369862361, y: 10841.747779303612, z: 7670.509455766194 }, { x: 127.36338796169231, y: 4716.795093859403, z: -379.3846010914671 }, 500,
function () {
});
} else {
//查找该楼层设备
var showmodels = [];
$.each(modelList[type].data, function (_devindex, _devobj) {
if (parseInt(_devobj.floor) == floorNub) {
if (type == "rooms") {
showmodels.push("devLogo_" + type + "_room_" + _devobj.id + "_" + _devobj.name)
} else {
showmodels.push("devLogo_" + type + "_device_" + _devobj.id + "_" + _devobj.name)
}
}
});
$.each(models, function (_index, _obj) {
if (showmodels.indexOf(_obj.name) < 0) {
_obj.visible = false;
} else {
_obj.visible = true;
}
});
WT3DObj.commonFunc.changeCameraPosition({ x: 2842.032108861517, y: 15466.564073695303 - (43 - floorNub) * 200, z: 1543.7861561756818 }, { x: -402.0797318127744, y: 5157.3929866002245 - (43 - floorNub) * 200, z: -1354.1029952588615 }, 500,
function () {
});
}
}
ModelBussiness.prototype.tempNameList = [];
ModelBussiness.prototype.tempNetNameList = [];
ModelBussiness.prototype.tempJJNameList = [];
ModelBussiness.prototype.lastSelectedObj = null;
ModelBussiness.prototype.ClickSelect = function (_obj, _face, objs) {
var _this = modelBussiness;
if (_this.functionState == "lift") {
WT3DObj.commonFunc.setSkinColorByObj(WT3DObj.commonFunc.findObject("elevator_dev_1"), 0x000000);
WT3DObj.commonFunc.setSkinColorByObj(WT3DObj.commonFunc.findObject("elevator_dev_2"), 0x000000);
if (objs && objs.length > 0) {
var selectliftobj = null;
$.each(objs, function (_index, _lobj) {
if (_lobj.object && _lobj.object.name && _lobj.object.name.indexOf("elevator_dev_") >= 0) {
selectliftobj = _lobj.object;
}
});
if (selectliftobj) {
WT3DObj.commonFunc.setSkinColorByObj(selectliftobj, 0xffff00);
$("#liftDetail").show();
$("#liftDetail").attr("data-state", 1);
indexPage.showLiftDetailByModel(selectliftobj.name);
} else {
$("#liftDetail").hide();
$("#liftDetail").attr("data-state", 0);
}
}
}
}
//悬停
ModelBussiness.prototype.mouseOverCallBack = function (_obj, face) {
}
ModelBussiness.prototype.mouseInCurrentObj = null;
ModelBussiness.prototype.lastMouseInCurrentObj = null;
//鼠标滑入事件
ModelBussiness.prototype.mouseOverInCallBack = function (_obj, face, objs) {
console.log(_obj.name);
var _this = modelBussiness;
var color = 0xbfffea;
modelBussiness.lastMouseInCurrentObj = _obj;
modelBussiness.mouseInCurrentObj = _obj;
if (_this.functionState == "lift") {
if (_obj.name.indexOf("devLogo_") >= 0&& _obj.name.indexOf("video") >= 0) {
modelBussiness.mouseInCurrentObj = _sobj;
var screenPostion = WT3DObj.commonFunc.transToScreenCoord(_obj.position);
$("#MarkMessageHelper").remove();
$("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (screenPostion.x - 20) + "px;top:" + screenPostion.y + "px;height:2px;width:2px;z-index:1000;'></div>");
//devLogo_TV_1674_3F
var devType = _obj.name.split("_")[1];
var devId = _obj.name.split("_")[2];
var devName = _obj.name.split("_")[3];
var showobj = showDevDetail(devType, devId, devName);
layer.tips(showobj.html, "#MarkMessageHelper", {
tips: [1, 'rgba(3,24,60,0.62)'],
area: [showobj.width, showobj.height],
time: 0
})
}
}
else {
if (_obj.name.indexOf("vf_") >= 0) {
var floor = parseInt(_obj.name.replace("vf_", ""));
if (floor == modelBussiness.currentSelectFloor) {
return;
}
if (modelBussiness.currentSelectFloor>0) {
return;
}
var _sobj = _obj;
if (_obj.name.indexOf("OBJCREN") > 0) {
_sobj = _obj.parent;
}
modelBussiness.mouseInCurrentObj = _sobj;
_sobj.visible = true;
WT3DObj.commonFunc.setSkinColorByObj(_sobj, 0x00ffff);
WT3DObj.commonFunc.changeObjsOpacity([_sobj], 0, 0.2, 10, function () { });
$("#MarkMessageHelper").remove();
$("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (window.event.pageX ) + "px;top:" + (window.event.pageY-10) + "px;height:2px;width:2px;z-index:1000;'></div>");
layer.tips("<font style='font-size:18px;'>楼层:" + floor+ "楼</font>", "#MarkMessageHelper", {
tips: [1, '#003333'],
time: 0
});
}
else if (_obj.name.indexOf("devLogo_") >= 0) {
modelBussiness.mouseInCurrentObj = _sobj;
var screenPostion = WT3DObj.commonFunc.transToScreenCoord(_obj.position);
$("#MarkMessageHelper").remove();
$("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (screenPostion.x - 20) + "px;top:" + screenPostion.y + "px;height:2px;width:2px;z-index:1000;'></div>");
//var devType = _obj.name.split("_")[1];
//var devId = _obj.name.split("_")[2];
//var devName = _obj.name.split("_")[3];
var showobj = showDevDetail(_obj.name);
layer.tips(showobj.html, "#MarkMessageHelper", {
tips: [1, 'rgba(3,24,60,0.62)'],
area: [showobj.width, showobj.height],
time: 0
})
}
}
}
//鼠标滑出事件
ModelBussiness.prototype.mouseOverLeaveCallBack = function (_obj, face, nowobj) {
var _this = modelBussiness;
var color = 0x000000;
if (_this.functionState == "lift") {
if (_obj.name.indexOf("devLogo_") >= 0
|| _obj.name.indexOf("rack_") >= 0
|| _obj.name.indexOf("dev_") >= 0) {
layer.closeAll();
}
} else {
if (_obj.name.indexOf("vf_") >= 0) {
layer.closeAll();
var _sobj = _obj;
if (_obj.name.indexOf("OBJCREN") > 0) {
_sobj = _obj.parent;
}
WT3DObj.commonFunc.setSkinColorByObj(_sobj, 0x000000);
WT3DObj.commonFunc.changeObjsOpacity([_sobj], 0.2, 0, 10, function () {
});
} else if (_obj.name.indexOf("devLogo_") >= 0 || _obj.name.indexOf("rack_") >= 0 || _obj.name.indexOf("dev_") >= 0) {
layer.closeAll();
}
}
}
//播放摄像头
ModelBussiness.prototype.playVideo = function (wsSrc) {
var html = "<div id='devInfo'>";
html += ' <video id="videoPlayer" style="width:450px;height:300px;margin:0px;cursor:pointer;" autoplay muted>\
<source src="" type="application/x-rtsp">\
</video>';
html += "</div>";
layer.open({
title:"实时视频",
type: 1,
shade: 0,
content: html,
moveEnd: function (a) {
},
maxmin: false,
cancel: function () {
layer.closeAll();
}
});
var wsPlayer = new WSPlayer("videoPlayer", {
modules: [
{
client: RTSPClient,
transport: {
constructor: WebsocketTransport,
options: {
socket: wsSrc
}
}
}
]
});
wsPlayer.setSource(wsSrc, "rtsp");
}
ModelBussiness.prototype.hmodels = null;
ModelBussiness.prototype.getHelpModels = function () {
if (!modelBussiness.hmodels) {
var hnames = [];
for (var i = 1; i <= 13; i++) {
hnames.push("vf_" + i);
}
modelBussiness.hmodels = WT3DObj.commonFunc.findObjectsByNames(hnames);
$.each(modelBussiness.hmodels, function (_i, _o) { _o.material.depthTest = false; }
);
}
return modelBussiness.hmodels;
}
ModelBussiness.prototype.hideHelpModels = function () {
this.hideFloors();
var ms = modelBussiness.getHelpModels();
$.each(ms, function (_i, _o) {
_o.visible = true;
});
WT3DObj.commonFunc.changeObjsOpacity(ms, 0.8, 0, 10, function () {
});
$.each(modelBussiness.tempNameList, function (_i, _o) {
WT3DObj.destoryObj(_o);
});
modelBussiness.tempNameList = [];
$.each(modelBussiness.tempNetNameList, function (_i, _o) {
WT3DObj.destoryObj(_o);
});
modelBussiness.tempNetNameList = [];
$.each(modelBussiness.tempJJNameList, function (_i, _o) {
WT3DObj.destoryObj(_o);
});
modelBussiness.tempJJNameList = [];
}
ModelBussiness.prototype.nearCameraPostion = function (_obj, _face) {
//此处设置双击聚焦
{
var mainCamera = WT3DModel.camera;//主场景
var objpositionx = _obj.position.x;
var objpositiony = _obj.position.y;
var objpositionz = _obj.position.z;
if (typeof (_obj.parent) != 'undefined' && _obj.parent != null && typeof (_obj.parent.position) != 'undefined' && _obj.parent.position != null) {
objpositionx += _obj.parent.position.x;
objpositiony += _obj.parent.position.y;
objpositionz += _obj.parent.position.z;
}
if (typeof (_obj.oldPosition) != 'undefined' && _obj.oldPosition != null) {
objpositionx = _obj.oldPosition.x;
objpositiony = _obj.oldPosition.y;
objpositionz = _obj.oldPosition.z;
}
new TWEEN.Tween(WT3DModel.controls.target).to({
x: objpositionx, y: objpositiony, z: objpositionz
}, 600).onComplete(function () {
var x_distance = mainCamera.position.x - objpositionx;
var y_distance = mainCamera.position.y - objpositiony;
var z_distance = mainCamera.position.z - objpositionz;
var lv = 300 / Math.sqrt(x_distance * x_distance + y_distance * y_distance + z_distance * z_distance);
var runtweenTime = 1000;
if (lv > 0.6) {
runtweenTime = 400;
} else if (lv > 0.3) {
runtweenTime = 1000;
} else if (lv > 0.1) {
runtweenTime = 1200;
} else if (lv > 0.05) {
runtweenTime = 1600;
} else if (lv > 0.01) {
runtweenTime = 2000;
} else {
runtweenTime = 2500;
}
if (x_distance * x_distance + y_distance * y_distance + z_distance * z_distance > 300 * 300 && lv < 0.9999) {
new TWEEN.Tween(mainCamera.position).to({
x: objpositionx + (mainCamera.position.x - objpositionx) * lv, y: objpositiony + (mainCamera.position.y - objpositiony) * lv, z: objpositionz + (mainCamera.position.z - objpositionz) * lv
}, runtweenTime).start();
}
}).start();
}
}
/*
==============================电梯===============================================
*/
//显示电梯
ModelBussiness.prototype.showLiftModel = function () {
this.functionState = "lift";
this.vAllModel(function () {
WT3DObj.commonFunc.changeCameraPosition({ x: 2934.252457615192, y: 6578.88534028727, z: 7045.186930258046 },
{ x: -394.1032500428694, y: 845.5404737020468, z: -572.4129363162384 }, 1000,
function () {
modelBussiness.showLiftHelpModels();
});
})
}
ModelBussiness.prototype.closeLiftModel = function () {
this.functionState = "";
this.hideLiftHelpModels(function () {
WT3DObj.commonFunc.changeCameraPosition({ x: 2934.252457615192, y: 6578.88534028727, z: 7045.186930258046 },
{ x: -394.1032500428694, y: 845.5404737020468, z: -572.4129363162384 }, 1000,
function () {
window.modelBussiness.showAllBuild();;
modelBussiness.currentSelectFloor = -1;
});
});
}
ModelBussiness.prototype.showLiftHelpModels = function (callBack) {
var liftModelNames = ["elevator_shaft_1", "elevator_shaft_2", "elevator_dev_1", "elevator_dev_2"];
var liftModels = WT3DObj.commonFunc.findObjectsByNames(liftModelNames);
$.each(liftModels, function (_i, _o) {
_o.material.depthTest = false;
if (_o.material.materials) {
_o.material.materials.forEach(function (a) { a.depthTest = false; })
}
})
WT3DModel.commonFunc.changeObjsOpacity(liftModels, 0.05, 1, 800, function () {
if (callBack) {
callBack();
}
});
}
ModelBussiness.prototype.hideLiftHelpModels = function (callBack) {
var liftModelNames = ["elevator_shaft_1", "elevator_shaft_2", "elevator_dev_1", "elevator_dev_2"];
var liftModels = WT3DObj.commonFunc.findObjectsByNames(liftModelNames);
$.each(liftModels, function (_i, _o) {
_o.material.depthTest = true;
if (_o.material.materials) {
_o.material.materials.forEach(function (a) { a.depthTest = true; })
}
});
WT3DModel.commonFunc.changeObjsOpacity(liftModels, 1, 0.05, 800, function () {
if (callBack) {
callBack();
}
});
}
ModelBussiness.prototype.changeLiftHeight = function (name, floor) {
var height = this.getFloorHeigth(floor);
var lift = WT3DObj.commonFunc.findObject(name);
new TWEEN.Tween(lift.position).to({
y: height
}, 1500).start();
}
/*
==============================电梯END===============================================
*/
ModelBussiness.prototype.getFloorHeigth = function (floor) {
var height = -1000;
if (floor < 0) {
height = 300 * floor+75;
} else if (floor <= 43) {
height = 200 * (floor - 1)+75;
} else if (floor <= 44) {
height = 8705 + 75;
}
return height;
}
/*
==============================楼层模型处理===============================================
*/
//加载楼层
ModelBussiness.prototype.showFloors = function (callBack) {
var _this = this;
var floorModels = this.getFloorModels();
if (floorModels) {
$.each(floorModels, function (_index, _obj) {
if (_obj.oldPositionY || _obj.oldPositionY == 0) {
_obj.position.y = _obj.oldPositionY;
}
_obj.visible = true;
});
if (callBack) {
callBack();
}
} else {
httpGet("../js/models/floors.json", function (rs) {
WT3DObj.commonFunc.loadModelsByJsons(rs, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true, function (models) {
console.log(models);
var floorModels = _this.getFloorModels();
if (callBack) {
callBack();
}
});
});
}
}
ModelBussiness.prototype.hideFloors = function (callBack) {
var floorModels = this.getFloorModels();
if (floorModels) {
$.each(floorModels, function (_index, _obj) {
if (!_obj.oldPositionY) {
if (_obj.oldPositionY!=0) {
_obj.oldPositionY = _obj.position.y;
}
}
_obj.position.y = 100000;
_obj.visible = false;
});
}
if (callBack) {
callBack();
}
}
ModelBussiness.prototype.FloorModels = null;
ModelBussiness.prototype.getFloorModels = function () {
if (!this.FloorModels) {
var floorModels = [];
$.each(WT3DObj.scene.children, function (_index, _obj) {
if (_obj.name.indexOf("F1_") >= 0
|| _obj.name.indexOf("F2_") >= 0
|| _obj.name.indexOf("F3_") >= 0
) {
floorModels.push(_obj);
}
});
if (floorModels.length > 0) {
this.FloorModels = floorModels;
}
}
return this.FloorModels;
}
/*
==============================大楼模型处理===============================================
*/
//获取大楼模型
ModelBussiness.prototype.BigBuildModelsCache = null;
ModelBussiness.prototype.getAllBuildModels = function () {
if (this.BigBuildModelsCache) {
} else {
var f1models = [];
var buildmodels = [];
$.each(WT3DObj.scene.children, function (_index, _obj) {
if (_obj.name != "backFloor"
&& _obj.name.indexOf("roadFlow") < 0
&& _obj.name.indexOf("Light") < 0
&& _obj.type.indexOf("Light") < 0
&& _obj.name.indexOf("roadCase") < 0
&& _obj.name.indexOf("F1_") < 0
&& _obj.name.indexOf("F2_") < 0
&& _obj.name.indexOf("F3_") < 0
&& _obj.name.indexOf("skybox") < 0
&& _obj.name.indexOf("vf_") < 0
&& _obj.name.indexOf("hb_") < 0) {
buildmodels.push(_obj);
}
});
this.BigBuildModelsCache = buildmodels;
}
return this.BigBuildModelsCache;
}
//虚化隐藏大楼
ModelBussiness.prototype.vAllModel = function (callBack) {
modelBussiness.getAllBuildModels();
WT3DModel.commonFunc.changeObjsOpacity(modelBussiness.BigBuildModelsCache, 1, 0.02, 1500, function () {
$.each(modelBussiness.BigBuildModelsCache, function (_index, _obj) {
if (!_obj.oldPositionY) {
if (_obj.oldPositionY != 0) {
_obj.oldPositionY = _obj.position.y;
}
}
_obj.position.y = 100000;
_obj.visible = false;
});
if (callBack) {
callBack();
}
});
}
//显示大楼
ModelBussiness.prototype.showAllModel = function (callBack) {
modelBussiness.getAllBuildModels();
$.each(modelBussiness.BigBuildModelsCache, function (_index, _obj) {
if (_obj.oldPositionY || _obj.oldPositionY==0) {
_obj.position.y= _obj.oldPositionY ;
}
_obj.visible = true;
});
WT3DModel.commonFunc.changeObjsOpacity(modelBussiness.BigBuildModelsCache, 0.05, 1, 800, function () {
if (callBack) {
callBack();
}
});
}
//通道特效处理
ModelBussiness.prototype.UnrealBoom = function (a, b, c, d) {
renderScene = new THREE.RenderPass(WT3DObj.scene, WT3DObj.camera);
effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
var copyShader = new THREE.ShaderPass(THREE.CopyShader);
copyShader.renderToScreen = true;
modelBussiness.bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), (1.5), (0.4), (0.85));//1.0, 9, 0.5, 512);
modelBussiness.bloomPass.threshold = c ? c : 0.81;
modelBussiness.bloomPass.strength = b ? b : 1.5;
modelBussiness.bloomPass.radius = d ? d : 0.85;
modelBussiness.composer = new THREE.EffectComposer(WT3DObj.renderer);
modelBussiness.composer.setSize(window.innerWidth, window.innerHeight);
modelBussiness.composer.addPass(renderScene);
modelBussiness.composer.addPass(effectFXAA);
modelBussiness.composer.addPass(modelBussiness.bloomPass);
modelBussiness.composer.addPass(copyShader);
modelBussiness.params = {
projection: 'normal',
background: false,
exposure: (a ? a : 1.0),
bloomStrength: (b ? b : 1.5),
bloomThreshold: (c ? c : 0.85),
bloomRadius: (d ? d : 0.4)
};
WT3DObj.renderer.toneMapping = THREE.ReinhardToneMapping;
WT3DObj.renderer.gammaInput = true;
WT3DObj.renderer.gammaOutput = true;
WT3DObj.postProcessFuc = function () {
WT3DObj.renderer.toneMappingExposure = Math.pow(modelBussiness.params.exposure, 4.0);
modelBussiness.composer.render();
}
var xrange = { x: 1 }
new TWEEN.Tween(xrange).to({
x: 1.2
}, 1500).onUpdate(function () {
modelBussiness.params.exposure = this.x;
}).onComplete(function () {
new TWEEN.Tween(xrange).to({
x: 1
}, 2000).onUpdate(function () {
modelBussiness.params.exposure = this.x;
}).onComplete(function () {
}).start();
}).start();
}
/*
==============================通用方法===============================================
*/
ModelBussiness.prototype.commonFunc = {
showVideo: function (_obj) {
//获取位置
var screenPostion = WT3DObj.commonFunc.transToScreenCoord(_obj.position);
var cameraId = _obj.name.split("_")[3];
var title = config.Videos[cameraId];
$("#videoTitle").html(title + "(" + cameraId + ")");
$("#MarkMessageHelper").remove();
$("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (screenPostion.x) + "px;top:" + screenPostion.y + "px;height:2px;width:2px;z-index:1000;'></div>");
$("#videoDetail").show();
$("#videoDetail").css("left", $("#MarkMessageHelper").css("left"));
$("#videoDetail").css("top", (parseFloat($("#MarkMessageHelper").css("top")) - 300) + "px");
},
showNetDetail: function (_obj) {
//获取位置
var screenPostion = WT3DObj.commonFunc.transToScreenCoord(_obj.position);
$("#MarkMessageHelper").remove();
$("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (screenPostion.x) + "px;top:" + screenPostion.y + "px;height:2px;width:2px;z-index:1000;'></div>");
$("#netDetail").show();
$("#netDetail").css("left", $("#MarkMessageHelper").css("left"));
$("#netDetail").css("top", (parseFloat($("#MarkMessageHelper").css("top")) - 200) + "px");
indexPage.showNetDevDetail(_obj.name);
},
showJJDetail: function (_obj) {
//获取位置
var screenPostion = WT3DObj.commonFunc.transToScreenCoord(_obj.position);
$("#MarkMessageHelper").remove();
$("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (screenPostion.x) + "px;top:" + screenPostion.y + "px;height:2px;width:2px;z-index:1000;'></div>");
$("#netDetail").show();
$("#netDetail").css("left", $("#MarkMessageHelper").css("left"));
$("#netDetail").css("top", (parseFloat($("#MarkMessageHelper").css("top")) - 200) + "px");
indexPage.showNetDevDetail(_obj.name);
},
showDHDevDetail: function (_obj) {
//获取位置
var screenPostion = WT3DObj.commonFunc.transToScreenCoord(_obj.position);
$("#MarkMessageHelper").remove();
$("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (screenPostion.x) + "px;top:" + screenPostion.y + "px;height:2px;width:2px;z-index:1000;'></div>");
layer.closeAll();
if (_obj.name.indexOf("dhF1_Rack") >= 0) {
$("#rackDetail").show();
$("#rackDetail").css("left", $("#MarkMessageHelper").css("left"));
$("#rackDetail").css("top", (parseFloat($("#MarkMessageHelper").css("top")) - 170) + "px");
} else if (_obj.name.indexOf("dhF1_UPS") >= 0) {
$("#upsDetail").show();
$("#upsDetail").css("left", $("#MarkMessageHelper").css("left"));
$("#upsDetail").css("top", (parseFloat($("#MarkMessageHelper").css("top")) - 170) + "px");
} else if (_obj.name.indexOf("dhF1_camera_") >= 0) {
$("#dhVideoDetail").show();
var cameraId = config.Videos.dhCameraId;
var title = config.Videos.dhCameraTitle;
$("#dhVideoDetail table td:first").html(title + '<i class="ace-icon fa fa-wifi" style="margin-left:5px;color:#1bff00;" />')
$("#dhVideoDetail").css("left", $("#MarkMessageHelper").css("left"));
$("#dhVideoDetail").css("top", (parseFloat($("#MarkMessageHelper").css("top")) - 170) + "px");
} else if (_obj.name.indexOf("dhF1_AirConfig") >= 0) {
$("#airConfig2Detail").show();
$("#airConfig2Detail").css("left", $("#MarkMessageHelper").css("left"));
$("#airConfig2Detail").css("top", (parseFloat($("#MarkMessageHelper").css("top")) - 170) + "px");
}
}
, showDoorInfo: function (_obj) {
//获取位置
var screenPostion = WT3DObj.commonFunc.transToScreenCoord(_obj.position);
$("#MarkMessageHelper").remove();
$("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (screenPostion.x) + "px;top:" + screenPostion.y + "px;height:2px;width:2px;z-index:1000;'></div>");
$("#doorDetail").show();
$("#doorDetail").css("left", $("#MarkMessageHelper").css("left"));
$("#doorDetail").css("top", (parseFloat($("#MarkMessageHelper").css("top")) - 230) + "px");
indexPage.showDoorDetail(_obj.name);
}
}
}
var modelBussiness = new ModelBussiness();
3.3、交互逻辑代码
var indexPage = null;
$(function () {
indexPage = new IndexPage();
indexPage.init();
window.parent.parent.indexPage = indexPage;
});
function IndexPage() {
this.currentMebu = "首页";
this.state = 0;//0正常状态 1 加载状态
this.runAutoRoute = false;//运行自动漫游
this.liftVideoCache = null;
};
function closeAutoRouteFunc() {
indexPage.runAutoRoute = false;
$(".btn_li").attr("class", "btn_li");
layer.closeAll();
}
IndexPage.prototype.init = function () { $("#indexBtn").click(function () {
$(".btn_li").attr("class", "btn_li");
$("#indexBtn").attr("class", "btn_li action");
indexPage.selectControl('index') }); $("#sbfBtn").click(function () {
$(".btn_li").attr("class", "btn_li");
$("#sbfBtn").attr("class", "btn_li action");
indexPage.selectControl('rooms')
});
$("#xzldbBtn").click(function () {
$(".btn_li").attr("class", "btn_li");
$("#xzldbBtn").attr("class", "btn_li action");
indexPage.selectControl('xzldb') //if (window.parent && window.parent.parent && window.parent.parent.openAutoRoute) {
// window.parent.parent.openAutoRoute();
//}
// indexPage.songpaifeng();
});
$("#xfmdylBtn").click(function () {
$(".btn_li").attr("class", "btn_li");
$("#xfmdylBtn").attr("class", "btn_li action");
indexPage.selectControl('xfmdyl') });
$("#room_exitBtn").click(function () {
$("#chart_index").show();
if (window.parent.iframeOpenHeaderFun) {
window.parent.iframeOpenHeaderFun();
}
layer.closeAll(); });
$("#ltxtBtn").click(function () {
$(".btn_li").attr("class", "btn_li");
$("#ltxtBtn").attr("class", "btn_li action");
indexPage.selectControl('ltxt') }); $("#searchDoorEventBtn").click(function () {
indexPage.searchDoorEventEvent();
}) $("#exitDoorEventBtn").click(function () {
layer.closeAll(); });
$("#exitDevAlarmBtn").click(function () {
layer.closeAll();
});
$("#searchDevAlarmBtn").click(function () {
indexPage.showAlarmListByDev($("#selectEAlarmDevid").val(), $("#alarmStartTime").val(), $("#alarmEndTime").val());
}); }
IndexPage.prototype.selectControl = function (menuType) {
var _this = this;
if (indexPage.state == 1) {
layer.msg(indexPage.currentMebu+"系统加载中，请稍后操作");
return;
}
indexPage.state = 1;
setTimeout(function () {
indexPage.state = 0;
}, 1500);
indexPage.currentMebuType = menuType;
modelBussiness.addVitureDev(menuType);
$(".contentRight").hide();
$("#fourBtns").show();
this.commonFunc.removeAllVideo();
$("#floorsBtn").html("");
switch (menuType) {
case "index": {
indexPage.currentMebu = "首页";
indexPage.indexPage(menuType, "首页");
if (window.parent.iframeOpenFun) {
window.parent.iframeOpenFun();
}
} break;
case "rooms": {
if (window.parent.iframeCloseFun) {
window.parent.iframeCloseFun();
}
indexPage.currentMebu = "设备房"; var floorsbtn = ' <div class="floorNub action" id="floorBtn_0" onclick="indexPage.selectFloor(0,\'rooms\')">全楼层</div>';
modelList.rooms.data = modelList.rooms.data.sort(function (a, b) { return parseInt(b.floor) - parseInt(a.floor) });
var floornub = -100;
$.each(modelList.rooms.data, function (_index, _obj) {
if (floornub != _obj.floor) {
floorsbtn += ' <div class="floorNub" id="floorBtn_' + _obj.floor + '" onclick="indexPage.selectFloor(' + _obj.floor + ',\'rooms\')">楼层' + _obj.floor + '</div>';
floornub = _obj.floor;
}
});
setTimeout(function () {
$("#floorsBtn").html(floorsbtn);
}, 3000); _this.showRooms(); } break;
case "xzldb": {
if (window.parent.iframeCloseFun) {
window.parent.iframeCloseFun();
}
indexPage.currentMebu = "写字楼电表"; var floorsbtn = ' <div class="floorNub action" id="floorBtn_0" onclick="indexPage.selectFloor(0,\'xzldb\')">全楼层</div>';
modelList.xzldb.data = modelList.xzldb.data.sort(function (a, b) { return parseInt(b.floor) - parseInt(a.floor) });
var floornub = -100;
$.each(modelList.xzldb.data, function (_index,_obj) {
if (floornub != _obj.floor) {
floorsbtn += ' <div class="floorNub" id="floorBtn_' + _obj.floor + '" onclick="indexPage.selectFloor(' + _obj.floor + ',\'xzldb\')">楼层' + _obj.floor + '</div>';
floornub = _obj.floor;
}
}); setTimeout(function () {
$("#floorsBtn").html(floorsbtn);
}, 3000); var roomnubs = modelList.xzldb.roomId.length;
var result = [];
$.each(modelList.xzldb.roomId, function (_i, _o) { webapi.getDevAndVluesList(_o, function (response) {
roomnubs--;
if (response && response.result && response.result.length >= 0) {
result = result.concat(response.result)
}
if (roomnubs == 0) {
_this.showListDetail(result);
}; });
})
} break;
case "xfmdyl": {
if (window.parent.iframeCloseFun) {
window.parent.iframeCloseFun();
}
indexPage.currentMebu = "消防压力"; var floorsbtn = ' <div class="floorNub action" id="floorBtn_0" onclick="indexPage.selectFloor(0,\'xfmdyl\')">全楼层</div>';
modelList.xfmdyl.data = modelList.xfmdyl.data.sort(function (a, b) { return parseInt(b.floor) - parseInt(a.floor) });
var floornub = -100;
$.each(modelList.xfmdyl.data, function (_index, _obj) {
if (floornub != _obj.floor) {
floorsbtn += ' <div class="floorNub" id="floorBtn_' + _obj.floor + '" onclick="indexPage.selectFloor(' + _obj.floor + ',\'xfmdyl\')">楼层' + _obj.floor + '</div>';
floornub = _obj.floor;
}
}); setTimeout(function () {
$("#floorsBtn").html(floorsbtn);
}, 3000); webapi.getDevAndVluesList(modelList.xfmdyl.roomId, function (response) {
if (response && response.result && response.result.length >= 0) {
_this.showListDetail(response.result);
// if (callBack) { callBack(response.result); }
} else {
layer.msg("获取设备失败");
}
});
} break;
case "ltxt": {
if (window.parent.iframeCloseFun) {
window.parent.iframeCloseFun();
}
indexPage.currentMebu = "冷通系统";
webapi.getDevAndVluesList(modelList.ltxt.roomId, function (response) {
if (response && response.result && response.result.length >= 0) {
_this.showListDetail(response.result);
// if (callBack) { callBack(response.result); }
} else {
layer.msg("获取设备失败");
}
});
} break; case "door": {
indexPage.currentMebu = "门禁";
indexPage.doorPage(menuType,"门禁");
$("#fourBtns").hide();
} break;
case "TV": {
indexPage.currentMebu = "信息发布";
indexPage.TVPage(menuType, "信息发布");
$("#fourBtns").hide();
} break;
case "environment": {
indexPage.currentMebu = "环境";
indexPage.environmentPage(menuType, "环境");
$("#fourBtns").hide();
} break;
case "aircontrol": {
indexPage.currentMebu = "空调";
indexPage.aircontrolPage(menuType, "空调");
$("#fourBtns").hide();
} break;
case "radio": {
indexPage.currentMebu = "广播";
indexPage.radioPage(menuType, "广播");
$("#fourBtns").hide();
} break;
case "video": {
indexPage.currentMebu = "视频";
indexPage.videooPage(menuType, "视频");
$("#fourBtns").hide();
} break;
case "fire": {
indexPage.currentMebu = "消防";
indexPage.firePage(menuType, "消防");
$("#fourBtns").hide();
} break;
case "lift": {
indexPage.currentMebu = "电梯";
indexPage.liftPage(menuType, "电梯");
$("#fourBtns").hide();
} break;
case "pds": {
console.log(window);
window.location.href = "pdsCenter.html";
} break;
case "dataCenter": {
window.location.href = "dataCenter.html";
} break; }
}
IndexPage.prototype.selectFloor = function (floornub,type) {
$(".floorNub").attr("class", "floorNub")
$("#floorBtn_" + floornub).attr("class", "floorNub action");
modelBussiness.showFloorDev(floornub, type);
} //通用方法
IndexPage.prototype.webRtcServers = {};
IndexPage.prototype.commonFunc ={
addVideo: function (divId, url, video) {
if (indexPage.webRtcServers["video_" + divId]) {
indexPage.webRtcServers["video_" + divId].disconnect();
}
indexPage.webRtcServers["video_" + divId] = null;
var urlConfig = { video: video, audio: null };
indexPage.webRtcServers["video_" + divId] = new WebRtcStreamer(divId, url);
indexPage.webRtcServers["video_" + divId].connect(urlConfig.video, urlConfig.audio, "rtptransport=tcp&timeout=60");
// window.onbeforeunload = function () { this.webRtcServer.disconnect() }
},
removeVideo: function (divId) {
if (indexPage.webRtcServers["video_" + divId]) {
indexPage.webRtcServers["video_" + divId].disconnect();
}
indexPage.webRtcServers["video_" + divId] = null;
}
,
removeAllVideo: function () {
for (var webrtc in indexPage.webRtcServers) {
if (indexPage.webRtcServers[webrtc]) {
indexPage.webRtcServers[webrtc].disconnect();
}
indexPage.webRtcServers[webrtc] = null;
}
}
,
createPIEChart: function (id, giftImageUrl, value) {
if ($("#" + id).length > 0) {
var myChart = echarts.init(document.getElementById(id)); var option = {
graphic: {
elements: [{
type: 'image',
style: {
image: giftImageUrl,
width: 20,
height: 20
},
left: 'center',
top: 'center'
}]
},
polar: {
radius: ['65%', '78%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [{
name: '',
type: 'bar',
roundCap: true,
barWidth: 90,
showBackground: true,
backgroundStyle: {
color: 'rgba(66, 66, 66, .0)',
},
data: [value],
coordinateSystem: 'polar', itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#16CEB9',
},
{
offset: 1,
color: '#6648FF',
},
]),
},
},
},
{
name: '',
type: 'pie',
startAngle: 80,
radius: ['90%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
color: 'rgba(66, 66, 66, .1)',
borderWidth: 1,
borderColor: '#5269EE',
},
data: [100],
}, ], };
myChart.setOption(option);
}
}
,
createStaticByDevType: function (devType) { }
} //=============设备房==========================
IndexPage.prototype.showRooms = function () {
$("#chart_index").show();
var _this = this;
var html = "";
var allNub = modelList.rooms.data.length;
var onlineNub = modelList.rooms.data.length;
$.each(modelList.rooms.data, function (_index, _obj) {
html += _this.showRoomDetail(_obj);
}); createCSystemRoomsStatic("index", allNub, onlineNub);
$("#index_1").html(html);
var roomNub = modelList.rooms.data.length;
var Allonnub = 0;
var Alloffnub = 0;
$.each(modelList.rooms.data, function (_rindex, _robj) {
webapi.getDevAndVluesList(_robj.id, function (response) {
roomNub--;
var roomContentDevHtml = "";
if (response && response.result && response.result.length >= 0) {
var ronnub = 0;
var roffnub = 0;
$.each(response.result, function (_devindex, _eobj) { if (_eobj) {
{
roomContentDevHtml += ' <div class="dev_DivMete">\
<div class="dev_DivMeteName" title=' + _eobj.objName + '>\
' + _eobj.objName + '：\
</div>\
<div class="dev_DivMeteValue">' + (_eobj.objState == "ONLINE" ? "在线" : "<font style='color:red;'>离线</font>") + '\
</div>\
</div>';
_eobj.objState == "ONLINE" ? ronnub++ : roffnub++;
}
}
});
$("#room_" + _robj.id).html(roomContentDevHtml);
$("#room_" + _robj.id + "_all").html(ronnub + roffnub);
$("#room_" + _robj.id + "_on").html(ronnub);
$("#room_" + _robj.id + "_off").html(roffnub);
Allonnub += ronnub;
Alloffnub+=roffnub;
if (roomNub == 0) {
createCSystemStatic("index", (Allonnub + Alloffnub), Allonnub); }
} else {
console.log("error:获取设备失败,eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee");
}
});
}); } IndexPage.prototype.showRoomDetail = function (_obj) {
var html = "";
if (_obj ) { html = ' <div class="fireLi_Div" style="height:auto;">\
<div class="fireLi_DivTop">\
<font class="fireLi_DivTopName" title="' + _obj.name + '">' + _obj.name + '</font>\
<font class="fireLi_DivTopState">总数：<font style="color:#ff9900;font-size:14px;" id="room_' + _obj.id + '_all" >3</font>；在线：<font style="color:#ff9900;font-size:14px;" id="room_' + _obj.id + '_on" >3</font>；离线：<font style="color:#ff9900;font-size:14px;" id="room_' + _obj.id + '_off" >3</font></font>\
</div>\
<div class="fireLi_DivContent" id="room_' + _obj.id + '"> </div>\
</div>';
}
return html;
}
//=============其它设备========================== IndexPage.prototype.showListDetail = function (result) {
$("#chart_index").show();
var _this = this;
var html = "";
var allNub = 0;
var onlineNub = 0;
$.each(result, function (_index, _obj) {
html += _this.showDetail(_obj);
allNub++;
if (_obj.objState == "ONLINE") { onlineNub++;
}
});
createCSystemStatic("index", allNub, onlineNub);
$("#index_1").html(html);
}
IndexPage.prototype.showDetail = function (_obj) {
var html = ""; html = ' <div class="fireLi_Div' + (_obj.objState == "ONLINE" ? "" : " offline") + '" style="height:auto;">\
<div class="fireLi_DivTop">\
<font class="fireLi_DivTopName" title="' + _obj.objName + '">' + _obj.objName + '</font>\
<font class="fireLi_DivTopState">' + (_obj.objState == "ONLINE" ? "在线" : "<font style='color:red'>离线</font>") + '</font>\
</div>\
<div class="fireLi_DivContent">';
if (_obj && _obj.values && _obj.values.length > 0) { $.each(_obj.values, function (_eindex, _eobj) {
{
if (_eobj.key) { _eobj.sValue2 = _eobj.sValue;
if (_eobj.sValue == "END") {
_eobj.sValue2 = "无告警"
} else if (_eobj.sValue == "BEGIN") {
_eobj.sValue2 = "<font style='color:red;'>告警</font>"
} html += ' <div class="dev_DivMete">\
<div class="dev_DivMeteName" title=' + _eobj.meteName + '>\
' + _eobj.meteName + '：\
</div>\
<div class="dev_DivMeteValue" data-unit="' + _eobj.unit + '" data-keyname="' + _eobj.meteName + '" id="devParamValue_' + _eobj.meteId + '">' + _eobj.sValue2+(_eobj.unit ? _eobj.unit : "") + '\
</div>\
</div>';
}
}
});
}
html += ' </div>\
</div>'; return html;
}
//===================================
IndexPage.prototype.XZLDBPage = function (id, name) {
var _this = this;
$("#chart_" + id).show();
createCSystemStatic(id, name, config.XZLDB.deviceTypeId, false, function (result) {
_this.showXZLDBListDetail(result);
});
} IndexPage.prototype.showXZLDBListDetail = function (result) {
var _this = this;
var html = "";
var meteids = [];
result = result.sort(function (a, b) { return b.onlineState - a.onlineState });
$.each(result, function (_index, _obj) {
var hobj = _this.showXZLDBDetail(_obj);
html += hobj.html;
meteids = meteids.concat(hobj.meteids);
});
$("#XZLDB_2").html(html);
setTimeout(function () {
_this.flashXZLDBDetailValue(meteids);
}, 200);
if (_this.flashXZLDBDetailValueInterval) {
clearInterval(_this.flashXZLDBDetailValueInterval);
}
_this.flashXZLDBDetailValueInterval = setInterval(function () {
if (_this.currentMebuType == "XZLDB" && meteids.length > 0) {
_this.flashXZLDBDetailValue(meteids);
} else {
clearInterval(_this.flashXZLDBDetailValueInterval);
}
}, 5000);
}
IndexPage.prototype.flashXZLDBDetailValueInterval = null;
IndexPage.prototype.flashXZLDBDetailValue = function (meteids) {
var _this = this;
webapi.bulkGetRealTimeData(meteids, function (data) {
if (data && data.length > 0) {
$.each(data, function (_dindex, _dobj) {
var keyname = $("#devParamValue_" + _dobj.pointId).attr("data-keyname");
if (keyname) {
if (keyname.indexOf("温度") >= 0) {
_dobj.value += "℃";
} else if (keyname.indexOf("湿度") >= 0) {
_dobj.value += "%";
}
}
console.log("#devParamValue_" + _dobj.pointId)
console.log(_dobj.value)
$("#devParamValue_" + _dobj.pointId).html(_dobj.value);
});
}
}); }
IndexPage.prototype.showXZLDBDetail = function (_obj) {
var html = ' <div class="fireLi_Div' + (_obj.onlineState == 1 ? "" : " offline") + '" style="height:auto;">\
<div class="fireLi_DivTop">\
<font class="fireLi_DivTopName" title="' + _obj.name + '">' + _obj.name + '</font>\
<font class="fireLi_DivTopState">' + (_obj.onlineState == 1 ? "在线" : "离线") + '</font>\
</div>\
<div class="fireLi_DivContent">';
var meteids = [];
if (_obj && _obj.extra && _obj.extra.length > 0) { $.each(_obj.extra, function (_eindex, _eobj) {
if (_eobj.key.indexOf("控制") < 0) {
html += ' <div class="fireLi_DivMete">\
<div class="fireLi_DivMeteName" >\
' + _eobj.key + '：\
</div>\
<div class="fireLi_DivMeteValue" data-keyname="' + _eobj.key + '" id="devParamValue_' + _eobj.value + '">\
<img src="../plugs/layer/layui/css/modules/layer/default/loading-1.gif" style="width:16px;height:16px;" />\
</div>\
</div>';
meteids.push(_eobj.value);
}
});
}
html += ' </div>\
<div class="fireLi_DivBottom">\
<div class="fireLi_divBtn1">\
<font style="float:left;margin-left: 27px;">位置：</font>\
<font style="float:left;">' + _obj.shortAddress + '</font>\
</div>\
<div class="fireLi_divBtn2" onclick="indexPage.showEDevAlarmListByDev(\'' + _obj.serialNumber + '\')">\
查看报警记录\
</div>\
</div>\
</div>';
return {
html: html,
meteids: meteids
};
} //==============主页=========================== IndexPage.prototype.indexPage = function (id, name) {
} //自动漫游
IndexPage.prototype.showAutoRunRouteTimeIndex = null; //机房
IndexPage.prototype.showDataCenter = function (filter) {
layer.open({
type: 1,
shade: 0.8,
skin: 'myLayer',
title: false,
area: ["1050px", "750px"],
content: $('#dataCeneterDiv'),
cancel: function () {
indexPage.runAutoRoute = false;
if (indexPage.showAutoRunRouteTimeIndex) {
clearTimeout(indexPage.showAutoRunRouteTimeIndex);
}
if (window.parent && window.parent.parent && window.parent.parent.closeAutoRoute) {
window.parent.parent.closeAutoRoute();
}
$(".btn_li").attr("class", "btn_li");
$("#iframe_dataCenterContent").html('')
},
success: function () { $("#iframe_dataCenterContent").html('<iframe src="dataCenter.html' + (filter?"?filter="+filter:"") + '" style="width:100%;border:0px solid black;height:600px;" id="iframe_bpd"></iframe>')
}
}); }
//变电站
IndexPage.prototype.showBianDianZhan = function () {
layer.closeAll();
setTimeout(function () {
layer.open({
type: 1,
shade: 0.8,
skin: 'myLayer',
title: false,
area: ["1050px", "750px"],
content: $('#peidianshi'),
cancel: function () {
indexPage.runAutoRoute = false;
if (indexPage.showAutoRunRouteTimeIndex) {
clearTimeout(indexPage.showAutoRunRouteTimeIndex);
}
if (window.parent && window.parent.parent && window.parent.parent.closeAutoRoute) {
window.parent.parent.closeAutoRoute();
}
$(".btn_li").attr("class", "btn_li");
$("#iframe_bpdContent").html('')
},
success: function () { $("#iframe_bpdContent").html('<iframe src="pdsCenter.html" style="width:100%;border:0px solid black;height:600px;" id="iframe_bpd"></iframe>')
}
});
}, 200)
}
//显示首页视频
IndexPage.prototype.showIndexVideo = function () {
var url = { video: location.search.slice(1) };
var options = webrtcConfig.options;
if (typeof URLSearchParams != 'undefined') {
var params = new URLSearchParams(location.search);
if (params.has("video") || params.has("audio")) {
url = { video: params.get("video"), audio: params.get("audio") };
}
if (params.has("options")) {
options = params.get("options");
}
}
window.onload = function () {
this.webRtcServer = new WebRtcStreamer("video", webrtcConfig.url);
document.getElementById("title").innerHTML = url.video;
webRtcServer.connect(url.video, url.audio, options);
fetch(webrtcConfig.url + "/api/version").then(r => r.text()).then((response) => {
document.getElementById("footer").innerHTML = "<p><a href='https://github.com/mpromonet/webrtc-streamer'>WebRTC-Streamer</a> " + JSON.parse(response).split(" ")[0] + "</p>";
});
}
window.onbeforeunload = function () { this.webRtcServer.disconnect() } }
//==============给排水===========================
IndexPage.prototype.showJiPaiShui = function () {
layer.closeAll(); $(".btn_li").attr("class", "btn_li");
$("#jipaishuiBtn").attr("class", "btn_li action");
setTimeout(function () {
layer.open({
type: 1,
shade: 0.8,
skin: 'myLayer',
title: false,
area: ["985px", "750px"],
content: $('#jpaishui'),
cancel: function () {
indexPage.runAutoRoute = false;
if (indexPage.showAutoRunRouteTimeIndex) {
clearTimeout(indexPage.showAutoRunRouteTimeIndex);
}
if (window.parent && window.parent.parent && window.parent.parent.closeAutoRoute) {
window.parent.parent.closeAutoRoute();
}
$(".btn_li").attr("class", "btn_li");
},
success: function () {
webapi.getDeviceList(config.water.deviceTypeId, function (result) {
console.log(result);
var _html = "";
var meteids = [];
if (result && result.length > 0) {
result = result.sort(function (a, b) { return a.type - b.type });
var typenub = 0;
$.each(result, function (_index, _obj) {
if (_obj.type != typenub) {
typenub = _obj.type;
_html += "<div style='width:100%;padding-left:20px;padding-right:23px;'><div style='width:100%;line-height: 200%;color: white; padding-left: 10px;border: 1px solid rgba(255,255,255,0.11);background: rgba(1,44,110,0.38);'>" + (_obj.type == 1 ? " 发电机房" : (_obj.type == 2 ? "消防泵房" : "消防稳压泵")) + "</div></div>";
}
_html += '<div class="' + (_obj.onlineState == 1 ? "" : "offline") + '" style="float:left;margin:10px;padding:5px;background:rgba(190, 225, 255, 0.05);width:280px;height:270px;margin:20px;">\
<div style="height:33px;border-bottom:2px solid rgba(255,255,255,0.3);width:100%;line-height:33px !important;">\
<font style="float:left;color:white;margin-left:5px;font-size:12px;">' + _obj.name + '</font>\
<font id="meteValueRun_' + _obj.extra[0].value + '" style="display:none;float:right;color:white;margin-right:5px;font-size:12px;color:#32C5FF">-</font>\
</div>\
<div style="height:120px;padding-top:10px;">\
' + (_obj.name.indexOf("泵") >= 0 && _obj.name.indexOf("井") < 0 ? '<div><img src="../img/pics/icons/shuibeng.png" style="width:86px;height:100px;margin-left:94px;" /></div>' : '<img src="../img/pics/icons/water2.png" style="width:150px;height:100px;margin-left:62px;" />') + '\
<div data-runid="meteValueRunState_' + _obj.extra[0].value + "_" + _obj.extra[1].value + '_" class="' + (_obj.name.indexOf("泵") >= 0 && _obj.name.indexOf("井") < 0 ? 'shuibeng' : 'jipaishui') + '"></div>\
</div>'; if (_obj.extra && _obj.extra.length>0) {
$.each(_obj.extra, function (_eindex, _eobj) {
_html += '<div style="height:33px;width:' + (_obj.extra.length > 2 ? "50%" : "100%") + ';line-height:33px !important;">\
<font style="float:left;color:white;margin-left:5px;font-size:12px;">' + _eobj.key + '：<font id="meteValue_' + _eobj.value + '" data-keyname="' + _eobj.key + '"></font></font>\
</div>';
meteids.push(_eobj.value);
})
}
// _html += '<div style="height:33px;width:100%;line-height:33px !important;">\
// <font style="float:left;color:white;margin-left:5px;font-size:12px;">高液位：<font id="meteValue_' + _obj.extra[0].value + '"></font></font>\
//</div>\
//<div style="height:33px;width:100%;line-height:33px !important;">\
// <font style="float:left;color:white;margin-left:5px;font-size:12px;">底液位：<font id="meteValue_' + _obj.extra[1].value + '"></font></font>\
//</div>';
_html += '<div class="divBtn" style="margin-left:90px;" onclick="indexPage.showEDevAlarmListByDev(\'' + _obj.serialNumber + '\')">\
查看告警记录\
</div>\
</div>'; // meteids.push(_obj.extra[1].value);
}); }
$("#waterCotent").html(_html);
//获取量的值
webapi.bulkGetRealTimeData(meteids, function (data) {
if (data && data.length > 0) {
$.each(data, function (_dindex, _dobj) {
if ($("#meteValue_" + _dobj.pointId).attr("data-keyname").indexOf("手自动") >= 0) {
$("#meteValue_" + _dobj.pointId).html(_dobj.value == "1" ? "自动" : "手动");
} else if ($("#meteValue_" + _dobj.pointId).attr("data-keyname").indexOf("运行状态") >= 0) {
$("#meteValue_" + _dobj.pointId).html(_dobj.value == "1" ? "运行" : "停止");
if (_dobj.value == "1") {
var dclass = $("div[data-runid*='_" + _dobj.pointId + "_']").attr("class");
$("div[data-runid*='_" + _dobj.pointId + "_']").attr("class", dclass + " RunSW");
}
} else if ($("#meteValue_" + _dobj.pointId).attr("data-keyname").indexOf("高液位") >= 0) {
$("#meteValue_" + _dobj.pointId).html(_dobj.value == "0" ? "正常" : "<font style='color:red;'>报警</font>");
if (_dobj.value!="0") { $("div[data-runid*='_" + _dobj.pointId + "_']").attr("class", "jipaishuiGW");
}
} else if ($("#meteValue_" + _dobj.pointId).attr("data-keyname").indexOf("低液位") >= 0) {
$("#meteValue_" + _dobj.pointId).html(_dobj.value == "0" ? "正常" : "<font style='color:red;'>报警</font>");
if (_dobj.value != "0") {
$("div[data-runid*='_" + _dobj.pointId + "_']").attr("class", "jipaishuiDSW");
}
} else {
$("#meteValue_" + _dobj.pointId).html(_dobj.value == "1" ? "<font style='color:red;'>报警</font>" : "正常");
}
$("#meteValueRun_" + _dobj.pointId).html(_dobj.value == "1" ? "运行" : "停止");
}) }
})
}, true);
}
});
}, 200);
}
//==============送排风===========================
IndexPage.prototype.songpaifeng = function () {
layer.closeAll();
$(".btn_li").attr("class", "btn_li");
$("#songpaifengBtn").attr("class", "btn_li action");
setTimeout(function () {
layer.open({
type: 1,
shade: 0.8, skin: 'myLayer',
title: false,
area: ["975px", "750px"],
content: $('#songfeng'),
cancel: function () {
indexPage.runAutoRoute = false;
if (indexPage.showAutoRunRouteTimeIndex) {
clearTimeout(indexPage.showAutoRunRouteTimeIndex);
}
if (window.parent && window.parent.parent && window.parent.parent.closeAutoRoute) {
window.parent.parent.closeAutoRoute();
}
$(".btn_li").attr("class", "btn_li");
},
success: function () {
webapi.getDeviceList(config.wind.deviceTypeId, function (result) {
console.log(result);
var _html = "";
var meteids = [];
if (result && result.length > 0) {
$.each(result, function (_index,_obj) {
_html += '<div class="' + (_obj.onlineState == 1 ? "" : "offline") + '" style="float:left;margin:10px;padding:5px;background:rgba(190, 225, 255, 0.05);width:280px;height:270px;margin:20px;">\
<div style="height:33px;border-bottom:2px solid rgba(255,255,255,0.3);width:100%;line-height:33px !important;">\
<font style="float:left;color:white;margin-left:5px;font-size:12px;">' + _obj.name+ '</font>\
<font id="meteValueRun_' + _obj.extra[0].value + '" style="display:none;float:right;color:white;margin-right:5px;font-size:12px;color:#32C5FF"></font>\
</div>\
<div style="height:120px;padding-top:10px;">\
<img src="../img/pics/icons/songpaifeng2.png" style="width:150px;height:100px;margin-left:65px;" />\
<div id="meteValueRunState_' + _obj.extra[0].value + '" class="songPaiFengFS"></div>\
</div>\
<div style="height:33px;width:50%;line-height:33px !important;">\
<font style="float:left;color:white;margin-left:5px;font-size:12px;">' + _obj.extra[0].key + '：<font id="meteValue_' + _obj.extra[0].value + '" data-keyname="' + _obj.extra[0].key + '"></font></font>\
</div>\
<div style="height:33px;width:50%;line-height:33px !important;">\
<font style="float:left;color:white;margin-left:5px;font-size:12px;">故障报警：<font id="meteValue_' + _obj.extra[1].value + '" data-keyname="' + _obj.extra[1].key + '"></font></font>\
</div>\
<div style="height:33px;width:100%;line-height:33px !important;">\
<font style="float:left;color:white;margin-left:5px;font-size:12px;">位置：' + _obj.shortAddress + '</font>\
</div>\
<div class="divBtn" style="margin-left:90px;" onclick="indexPage.showEDevAlarmListByDev(\'' + _obj.serialNumber + '\')">\
查看告警记录\
</div>\
</div>'; meteids.push(_obj.extra[0].value);
meteids.push(_obj.extra[1].value);
}); }
$("#songfengContent").html(_html); //获取量的值
webapi.bulkGetRealTimeData(meteids, function (data) {
if (data && data.length > 0) {
$.each(data, function (_dindex, _dobj) {
if ($("#meteValue_" + _dobj.pointId).attr("data-keyname").indexOf("手自动") >= 0) {
$("#meteValue_" + _dobj.pointId).html(_dobj.value == "1" ? "自动" : "手动");
} else if ($("#meteValue_" + _dobj.pointId).attr("data-keyname").indexOf("运行状态") >= 0) {
$("#meteValue_" + _dobj.pointId).html(_dobj.value == "1" ? "运行" : "停止");
if (_dobj.value == "1") {
$("#meteValueRunState_" + _dobj.pointId).attr("class", "songPaiFengFS Run");
} else {
$("#meteValueRunState_" + _dobj.pointId).attr("class", "songPaiFengFS");
} } else {
$("#meteValue_" + _dobj.pointId).html(_dobj.value == "1" ? "<font style='color:red;'>报警</font>" : "正常");
}
$("#meteValueRun_" + _dobj.pointId).html(_dobj.value == "1" ? "运行" : "停止");
}) }
})
}, true);
} });
}, 200);
} //================告警列表========================
IndexPage.prototype.showAlarmsList = function () {
var _this = this;
layer.open({
type: 1,
shade: 0.8,
skin: 'myLayer',
title: false,
area: ["700px", "650px"],
content: $('#alarmsList'),
cancel: function () {
indexPage.runAutoRoute = false;
if (indexPage.showAutoRunRouteTimeIndex) {
clearTimeout(indexPage.showAutoRunRouteTimeIndex);
}
if (window.parent && window.parent.parent && window.parent.parent.closeAutoRoute) {
window.parent.parent.closeAutoRoute();
}
$("#AlarmListResult").html("");
},
success: function () {
_this.flashAlarmList(layer.load());
}
});
}
IndexPage.prototype.flashAlarmList = function (layerloadindex) {
webapi.getAlarmDataList(function (records) {
if (layerloadindex) {
layer.close(layerloadindex);
}
if (records && records.length > 0) {
console.log(records);
var _html = '';
var nub = 0;
$.each(records, function (_index, _obj) {
if (_obj.device) {//存在设备信息
nub++;
_html += '<div class="alarmLi_Div" id="alarmDetal_' + _obj.id + '">\
<table >\
<tr>\
<td>设备类型：</td>\
<td class="alarmParamValue">' + getDeviceTypeById(_obj.device.deviceTypeId) + '</td>\
<td>设备名称：</td>\
<td class="alarmParamValue">' + _obj.device.name + '</td>\
<td>报警时间：</td>\
<td class="alarmParamValue">' + _obj.time + '</td>\
</tr>\
<tr>\
<td>报警原因：</td>\
<td colspan="3" title="' + _obj.message + '" style="overflow:hidden;line-height: 18px;">' + _obj.message + '</td>\
<td colspan="2" style="width:180px;"> <div onclick="indexPage.showAlarmPosition(\'' + _obj.device.deviceTypeId + '\',\'' + _obj.device.id + '\',\'' + _obj.device.name + '\',\'' + _obj.device.serialNumber + '\')" class="alarmListBtn">巡游报警位置</div><div onclick="indexPage.cancelAlarm(\'' + _obj.id + '\')" class="alarmListBtn">解除报警</div></td>\
</tr>\
</table>\
</div>'; }
}); $("#alarmListNub").html(nub);
$("#AlarmListResult").html(_html);
}
});
}
IndexPage.prototype.showAlarmPosition = function (deviceTypeid, id, name, serialNumber) {
layer.closeAll();
switch (""+deviceTypeid) {
case config.water.deviceTypeId:
indexPage.showJiPaiShui()
break;
case config.dataCenter.deviceTypeId:
indexPage.showDataCenter(serialNumber); break;
case config.powerCenter.deviceTypeId:
indexPage.showBianDianZhan(); break;
case config.wind.deviceTypeId:
indexPage.songpaifeng()
break;
case config.energy.deviceTypeId:
break;
case config.lift.deviceTypeId:
indexPage.selectControl('lift')
break;
case config.environment.deviceTypeId:
indexPage.selectControl('environment'); break;
case config.aircontrol.deviceTypeId:
indexPage.selectControl('aircontrol')
break;
case config.fire.deviceTypeId:
indexPage.selectControl('fire')
break;
case config.video.deviceTypeId:
indexPage.selectControl('video');
break;
case config.radio.deviceTypeId:
indexPage.selectControl('radio')
break;
case config.door.deviceTypeId:
indexPage.selectControl('door')
break;
case config.TV.deviceTypeId:
indexPage.selectControl('TV')
break;
} setTimeout(function () {
var tvmodel = WT3DObj.commonFunc.findObject("devLogo_" + indexPage.currentMebuType + "_" + id + "_" + name)
if (tvmodel) {
WT3DObj.commonFunc.changeCameraPosition({ x: tvmodel.position.x + 500, y: tvmodel.position.y + 500, z: tvmodel.position.z + 500 }, tvmodel.position,
500, function () { WT3DObj.commonFunc.flashObjs([tvmodel], "0x000000", "0x00ffff", 10, 200, 0); });
}
}, 2000);
}
IndexPage.prototype.cancelAlarm = function (id) {
layer.confirm("是否确认解除该报警？", function () {
var layerloadindex=layer.load();
webapi.deviceAlarmRelieve(id, function (res) {
layer.close(layerloadindex);
if (res.status == 200) {
layer.msg("解除成功");
$("#alarmDetal_" + id).remove();
_this.flashAlarmList();
} else {
layer.msg("解除失败");
console.log(res);
}
})
}, function () { })
}
//=============门禁=============================
IndexPage.prototype.doorPage = function (id, name) {
var _this = this;
$("#chart_" + id).show();
createCSystemStatic(id, name, config.door.deviceTypeId, false, function (result) {
_this.showDoorListDetail(result);
});
} IndexPage.prototype.showDoorListDetail = function (result) {
var _this = this;
var html = "";
result = result.sort(function (a, b) { return b.onlineState - a.onlineState });
$.each(result, function (_index, _obj) {
html += _this.showDoorDetail(_obj);
});
$("#door_2").html(html);
_this.getDoorState();
}
IndexPage.prototype.showDoorDetail = function (_obj,td) {
var html = '<div class="doorLi_Div' + (_obj.onlineState+"" == "1" ? "" : " offline") + '"" id="doorDetailDiv_' + (td ? td + "_" : "") + _obj.serialNumber + '">\
<div class="doorLi_DivTop">\
<font class="doorLi_DivTopName" title="' + _obj.name + '">' + _obj.name + '</font>\
<font class="doorLi_DivTopState" id="doorOnlineState_' + (td ? td + "_" : "") + _obj.serialNumber + '">' + (_obj.onlineState + "" == "1" ? "在线" : "离线") + '</font>\
</div>\
<div class="doorLi_DivBottom">\
<img class="doorLi_DivBottomImg" src="../img/pics/icons/doorPic.png" />\
<div class="doorLi_divBtn1">\
<font style="float:left;">门禁开关：</font>\
<div style="cursor:pointer;" class="doorLi_openClose" id="doorCloseOpenBtn_' + (td ? td + "_" : "") + _obj.serialNumber + '" data-id="' + ( _obj.serialNumber) + '" data-senserSate="' + (_obj.relay ? _obj.relay : "") + '" onclick="indexPage.doorCloseOpenBtn(\'' + ("doorCloseOpenBtn_" + (td ? td + "_" : "") + _obj.serialNumber) + '\')">开</div>\
</div>\
<div class="doorLi_divBtn2" id="doorShowEventListBtn_' + (td ? td + "_" : "") + _obj.serialNumber + '" onclick="indexPage.showDoorEvent(\'' + (_obj.ssid ? _obj.ssid : "") + '\')">\
查看门禁记录\
</div>\
</div>\
</div>';
return html; }
IndexPage.prototype.doorCloseOpenBtn = function (devControlBtnId) {
var className = $("#" + devControlBtnId).attr("class");
var devid = $("#" + devControlBtnId).attr("data-id");// devControlBtnId.split("_")[devControlBtnId.split("_").length-1];
var sSate = $("#" + devControlBtnId).attr("data-senserSate");
if (sSate == "2") { layer.tips("状态未知", "#" + devControlBtnId);
return;
} if (className.indexOf("closeBtn") < 0){
layer.confirm("是否确认关门",{title:"远程关门"}, function () {
webapi.remoteDoorCloseById(devid, function (res) {
if (res.status == 200) {
layer.closeAll();
layer.msg("远程关门成功");
$("#" + devControlBtnId).attr("class", "doorLi_openClose closeBtn");
} else {
console.log(res);
layer.msg("远程关门异常：" + res.msg);
}
})
}, function () { })
} else {
layer.confirm("开门时长：<input style='width:120px;color:black;' id='timeLong' value='10'/>秒", { title: "远程开门" }, function () {
var loadindex= layer.load();
var timelong = parseInt($("#timeLong").val());
webapi.remoteDoorOpenById(devid, timelong, function (res) {
layer.close(loadindex);
if (res&&res.status &&res.status == 200) {
layer.closeAll();
layer.msg("远程开门成功");
$("#" + devControlBtnId).attr("class", "doorLi_openClose");
} else {
console.log(res);
layer.msg("远程开门失败："+res.msg);
}
})
}, function () { }) }
}
IndexPage.prototype.getDoorState = function (fromCache) {
webapi.getAllDoorState(function (dataList) {
/*
alarm: "0"
connect: "1"
deviceId: "40288a857a514c53017a516404210970"
id: "40288a857a514c53017a5164042b09c9"
name: "192.168.10.219-1"
relay: "0"
sensor: "0"
*/
var doorStateobj = {}
if (dataList && dataList.length > 0) {
$.each(dataList, function (_index, _obj) { doorStateobj["door_" + _obj.id] = _obj;
});
}
var doorClist = webapi.DeviceListCache["deviceType_" + config.door.deviceTypeId]
if (doorClist) {
$.each(doorClist, function (_index, _obj) {
if (doorStateobj["door_" + _obj.serialNumber]) {
var doorState = doorStateobj["door_" + _obj.serialNumber];
_obj.name = doorState.name;
_obj.onlineState = doorState.connect;//设备链接状态（0离线，1在线，2禁用）
_obj.doorId = doorState.id;
_obj.doorSensorState = doorState.sensor;//门磁状态（0未知，1无门磁，2关闭，3打开）
_obj.alarm = doorState.alarm;//报警状态（无，报警，门开超时，门被意外打开，防拆，胁迫密码 开门，胁迫指纹开门，胁迫开门，门开超时，常开报警，电池电压过低，立即更 换电池，非法操作，后备电源，未知）
_obj.relay = doorState.relay;//继电器状态（0关闭，1打开，2未知）
if (_obj.relay + "" == "0") {
$("#doorCloseOpenBtn_" + _obj.serialNumber).attr("class", "doorLi_openClose closeBtn")
$("#doorCloseOpenBtn_3d_" + _obj.serialNumber).attr("class", "doorLi_openClose closeBtn") $("#doorCloseOpenBtn_" + _obj.serialNumber).html("关")
$("#doorCloseOpenBtn_3d_" + _obj.serialNumber).html("关")
} else if (_obj.relay + "" == "2") {//未知
$("#doorCloseOpenBtn_" + _obj.serialNumber).attr("class", "doorLi_openClose nouse")
$("#doorCloseOpenBtn_3d_" + _obj.serialNumber).attr("class", "doorLi_openClose nouse"); $("#doorCloseOpenBtn_" + _obj.serialNumber).html("未知")
$("#doorCloseOpenBtn_3d_" + _obj.serialNumber).html("未知") } else if (_obj.relay + "" == "1") {//打开
$("#doorCloseOpenBtn_" + _obj.serialNumber).attr("class", "doorLi_openClose")
$("#doorCloseOpenBtn_3d_" + _obj.serialNumber).attr("class", "doorLi_openClose"); $("#doorCloseOpenBtn_" + _obj.serialNumber).html("开")
$("#doorCloseOpenBtn_3d_" + _obj.serialNumber).html("开")
} $("#doorCloseOpenBtn_" + _obj.serialNumber).attr("data-senserSate", _obj.relay);
$("#doorCloseOpenBtn_3d_" + _obj.serialNumber).attr("data-senserSate", _obj.relay); $("#doorCloseOpenBtn_" + _obj.serialNumber).attr("data-id", _obj.doorId)
$("#doorCloseOpenBtn_3d_" + _obj.serialNumber).attr("data-id", _obj.doorId) $("#doorDetailDiv_" + _obj.serialNumber + " .doorLi_DivTopName").attr("title",_obj.name);
$("#doorDetailDiv_" + _obj.serialNumber + " .doorLi_DivTopName").html(_obj.name);
if (_obj.onlineState + "" == "1") {
$("#doorDetailDiv_" + _obj.serialNumber + " .doorLi_DivTopState").html("在线")
$("#doorDetailDiv_3d_" + _obj.serialNumber).attr("class", "doorLi_Div")
$("#doorDetailDiv_" + _obj.serialNumber).attr("class", "doorLi_Div")
} else {
if (_obj.onlineState + "" == "0") {
$("#doorDetailDiv_" + _obj.serialNumber + " .doorLi_DivTopState").html("离线")
} else {
$("#doorDetailDiv_" + _obj.serialNumber + " .doorLi_DivTopState").html("禁用")
}
$("#doorDetailDiv_" + _obj.serialNumber).attr("class", "doorLi_Div offline")
$("#doorDetailDiv_3d_" + _obj.serialNumber).attr("class", "doorLi_Div offline")
} $("#doorShowEventListBtn_" + _obj.serialNumber).attr("onclick", "indexPage.showDoorEvent('" + _obj.ssid + "')")
$("#doorShowEventListBtn_3d_" + _obj.serialNumber).attr("onclick", "indexPage.showDoorEvent('" + _obj.ssid + "')") }
});
}
console.log("门禁状态：");
console.log(dataList);
/*
alarm: "0"报警状态（无，报警，门开超时，门被意外打开，防拆，胁迫密码 开门，胁迫指纹开门，胁迫开门，门开超时，常开报警，电池电压过低，立即更 换电池，非法操作，后备电源，未知）
connect: "1"设备链接状态（0离线，1在线，2禁用）
deviceId: "40288a857a514c53017a5163b37b06d5"
id: "40288a857a514c53017a5163b3d0072e"
name: "192.168.10.206-1"
relay: "0"继电器状态（关闭，打开，未知
sensor: "0" 门磁状态（未知，无门磁，关闭，打开）
*/
}, fromCache)
}
IndexPage.prototype.showDoorEvent = function (deviceSn) {
var _this = this;
layer.open({
type: 1,
shade: 0.8,
skin: 'myLayer',
title: false,
area: ["700px", "615px"],
content: $('#doorEventList'),
colseBtn:0,
cancel: function () {
_this.runAutoRoute = false;
if (indexPage.showAutoRunRouteTimeIndex) {
clearTimeout(indexPage.showAutoRunRouteTimeIndex);
}
if (window.parent && window.parent.parent && window.parent.parent.closeAutoRoute) {
window.parent.parent.closeAutoRoute();
}
},
success: function () { var startTime = new Date().format("yyyy-MM-dd 00:00:00");
var endTime = new Date().format("yyyy-MM-dd hh:mm:ss");
$("#doorEventStartTime").val(startTime);
$("#doorEventEndTime").val(endTime);
$("#doorDevicecSn").val(deviceSn);
_this.searchDoorEventEvent();
//webapi.transactionDevice(deviceSn, startTime, endTime, 1, 1000, function (data) {
// if (data && data.length > 0) {
// _this.addDoorEventList(data);
// } else { // }
//});
//layer.close(layerLoadindex);
}
});
}
IndexPage.prototype.searchDoorEventEvent = function () {
//var startTime = new Date().format("yyyy-MM-dd 00:00:00");
//var endTime = new Date().format("yyyy-MM-dd hh:mm:ss");
var layerLoadindex = layer.load();
var deviceSn = $("#doorDevicecSn").val();
var startTime = $("#doorEventStartTime").val();
var endTime = $("#doorEventEndTime").val();
//var timeleng = (new Date(endTime).getTime() - new Date(startTime).getTime()) / 1000 / 3600 / 24;
//if (timeleng < 0 || timeleng > 30) {
// layer.tips("查询间隔需在30天内", "#doorEventEndTime", {
// tips: [1, '#fc8b11'],
// time: 4000
// });
// layer.close(layerLoadindex)
// return;
//}
webapi.transactionDevice(deviceSn, startTime, endTime, 1, 1000, function (data) {
layer.close(layerLoadindex)
if (data && data.length > 0) {
_this.addDoorEventList(data);
} else {
$("#doorEventListResult").html("<div style='text-align:center;width:100%;'>查无事件<div>");
}
});
}
/*
id 设备id
eventTime Date 记录设备触发时间
deptName 部门名称
areaName 区域名称
cardNo 卡号
pin 人员编号
name 人员名称
lastName 人员姓名，英文下才有用
devSn 设备序列号
verifyModeName 验证方式名称
eventName 事件描述
eventPointName 事件出发点名称
readerName 读头名称
devName 设备名称
logId 事件索引值，根据设备是否支持才有值
*/
IndexPage.prototype.addDoorEventList = function (data){
var _html = ' ';
var pins = [];
$.each(data, function (_index, _obj) {
if (_obj.eventName.indexOf("连接断开") < 0
&& _obj.eventName.indexOf("设备启动") < 0
&& _obj.eventName.indexOf("取消报警") < 0
) { if (_obj.pin && _obj.pin!="") {
pins.push(_obj.pin);
}
_html += ' <div style="width:100%;float:left;margin-top:15px;">\
<div style="float:left;width:85px;">\
<img id="personPhoto_' + _obj.pin + "_" + _index + '" src="../img/pics/icons/doorP.png" style="width:65px;height:80px;margin-left:15px; border:1px solid #32C5FF" />\
</div>\
<div style="float:left;width:590px;">\
<table class="doorEventTable">\
<tr>\
<td class="doorEvent_paramName">事件</td>\
<td class="doorEvent_paramValue">' + _obj.eventName + '</td>\
<td class="doorEvent_paramName">进入时间</td>\
<td class="doorEvent_paramValue">' + (new Date(_obj.eventTime).format("yyyy-MM-dd hh:mm:ss")) + '</td>\
</tr>\
<tr>\
<td class="doorEvent_paramName">姓名</td>\
<td class="doorEvent_paramValue">' + _obj.name + '</td>\
<td class="doorEvent_paramName">所属部门</td>\
<td class="doorEvent_paramValue">' + _obj.deptName + '</td>\
</tr>\
</table>\
</div>\
</div>';
}
}); $("#doorEventListResult").html(_html);
webapi.getPerson(pins + "", function (data) { if (data && data.length > 0) {
$.each(data, function (_index, _obj) {
if (_obj.personPhoto && _obj.personPhoto!="") {
$("img[id^='personPhoto_" + _obj.pin + "_']").attr("src", "data:image/jpg;base64," + _obj.personPhoto);
$("img[id^='personPhoto_" + _obj.pin + "_']").css("cursor", "url('../img/pics/icons/fangdajingSmall.png'), auto");
$("img[id^='personPhoto_" + _obj.pin + "_']").click(function () {
layer.open({
type: 1,
shade: 0.8,
skin: 'myLayer',
title: false,
area: ["350px", "420px"],
content: '<img src="data:image/jpg;base64,' + _obj.personPhoto + '" style="width:325px;height:400px;margin-left:15px; border:1px solid #32C5FF" />',
colseBtn: 0,
cancel: function () { },
success: function () { }
}); });
}
});
}
}); } //==============信息发布=============================
IndexPage.prototype.TVPage = function (id, name) {
var _this = this;
$("#chart_" + id).show();
createCSystemStatic(id, name, config.TV.deviceTypeId,false, function (result) {
_this.showTVListDetail(result);
});
}
IndexPage.prototype.showTVListDetail = function (result) {
var _this = this;
var html = "";
result = result.sort(function (a, b) { return b.onlineState - a.onlineState });
$.each(result, function (_index, _obj) {
html += _this.showTVDetail(_obj);
});
$("#TV_2").html(html);
}
IndexPage.prototype.showTVDetail = function (_obj, td) {
if (_obj.onlineState == 1) {
webapi.getTVScreenshot(_obj.serialNumber, function (res) {
if (res.status == 200 && res.data && res.data.img) {
$("#TVLi_DivBottomImg_" + (td ? td + "_" : "") + _obj.serialNumber).attr("src", res.data.img);
$("#TVLi_DivBottomImg_" + _obj.serialNumber).attr("src", res.data.img);
}
});
}
var html = '<div data-id="' + _obj.serialNumber +td+ '" class="TVLi_Div' + (_obj.onlineState == 1 ? "" : " offline") + '">\
<div class="TVLi_DivTop">\
<font class="TVLi_DivTopName" title="' + _obj.name + '">' + _obj.name + '</font>\
<font class="TVLi_DivTopState">' + (_obj.onlineState == 1 ? "在线" : "离线") + '</font>\
</div>\
<div class="TVLi_DivBottom">\
<img class="TVLi_DivBottomImg" id="TVLi_DivBottomImg_' + (td ? td + "_" : "") + _obj.serialNumber + '" src="../img/pics/icons/tvPic.png" />\
<div class="TVLi_divBtn1">\
<font style="float:left;">远程关机：</font>\
<div style="cursor:pointer;" class="TVLi_openClose closeBtn' + (_obj.onlineState == 1 ? "" : " nouse") + '" id="TVLiCloseOpenBtn_' + (td ? td + "_" : "") + _obj.serialNumber + '" onclick="indexPage.TVCloseOpenBtn(\'' + ("TVLiCloseOpenBtn_" + (td ? td + "_" : "") + _obj.serialNumber) + '\',\'' + _obj.onlineState + '\')">' + (_obj.onlineState == 1 ? "关机" : " 离线") + '</div>\
</div>\
<div class="TVLi_divBtn3">\
<table style="width:100%;">\
<tr><td style="cursor:pointer;" class="' + (_obj.onlineState == 1 ? "" : " nouse") + '" onclick="indexPage.setTVVolume(\'' + _obj.serialNumber + '\',\'' + _obj.onlineState + '\')">\
<img src="../img/pics/icons/voiceBtn2.png" style="width:25px;height:25px;' + (_obj.onlineState == 1 ? "" : " opacity:0.2") + '"/>\
</td><td style="cursor:pointer;" class="' + (_obj.onlineState == 1 ? "" : " nouse") + '" onclick="indexPage.setTVRestart(\'' + _obj.serialNumber + '\',\'' + _obj.onlineState + '\')">\
<img src="../img/pics/icons/restartBtn2.png" style="width:25px;height:25px;' + (_obj.onlineState == 1 ? "" : " opacity:0.2") + '"/></td></tr>\
<tr><td style="cursor:pointer;" class="' + (_obj.onlineState == 1 ? "" : " nouse") + '" onclick="indexPage.setTVVolume(\'' + _obj.serialNumber + '\',\'' + _obj.onlineState + '\')">设置音量</td>\
<td style="cursor:pointer;" class="' + (_obj.onlineState == 1 ? "" : " nouse") + '" onclick="indexPage.setTVRestart(\'' + _obj.serialNumber + '\',\'' + _obj.onlineState + '\')">设备重启</td></tr>\
</table>\
</div>\
<div class="TVLi_divBtn2" style="' + (_obj.onlineState == 1 ? "" : " color:#999 !important;background:rgba(0,0,0,0.3)") + '" onclick="indexPage.showTVScreenshot(\'' + _obj.serialNumber + '\',\'' + _obj.onlineState + '\')">\
查看发布内容\
</div>\
</div>\
</div>';
return html;
}
IndexPage.prototype.changeTVDetail = function (_obj,td) {
_obj.onlineState = 0;
var html = '<div class="TVLi_DivTop">\
<font class="TVLi_DivTopName" title="' + _obj.name + '">' + _obj.name + '</font>\
<font class="TVLi_DivTopState">' + (_obj.onlineState == 1 ? "在线" : "离线") + '</font>\
</div>\
<div class="TVLi_DivBottom">\
<img class="TVLi_DivBottomImg" id="TVLi_DivBottomImg_' + (td ? td + "_" : "") + _obj.serialNumber + '" src="../img/pics/icons/tvPic.png" />\
<div class="TVLi_divBtn1">\
<font style="float:left;">远程关机：</font>\
<div style="cursor:pointer;" class="TVLi_openClose closeBtn' + (_obj.onlineState == 1 ? "" : " nouse") + '" id="TVLiCloseOpenBtn_' + (td ? td + "_" : "") + _obj.serialNumber + '" onclick="indexPage.TVCloseOpenBtn(\'' + ("TVLiCloseOpenBtn_" + (td ? td + "_" : "") + _obj.serialNumber) + '\',\'' + _obj.onlineState + '\')">' + (_obj.onlineState == 1 ? "关机" : " 离线") + '</div>\
</div>\
<div class="TVLi_divBtn3">\
<table style="width:100%;">\
<tr><td style="cursor:pointer;" class="' + (_obj.onlineState == 1 ? "" : " nouse") + '" onclick="indexPage.setTVVolume(\'' + _obj.serialNumber + '\',\'' + _obj.onlineState + '\')">\
<img src="../img/pics/icons/voiceBtn2.png" style="width:25px;height:25px;' + (_obj.onlineState == 1 ? "" : " opacity:0.2") + '"/>\
</td><td style="cursor:pointer;" class="' + (_obj.onlineState == 1 ? "" : " nouse") + '" onclick="indexPage.setTVRestart(\'' + _obj.serialNumber + '\',\'' + _obj.onlineState + '\')">\
<img src="../img/pics/icons/restartBtn2.png" style="width:25px;height:25px;' + (_obj.onlineState == 1 ? "" : " opacity:0.2") + '"/></td></tr>\
<tr><td style="cursor:pointer;" class="' + (_obj.onlineState == 1 ? "" : " nouse") + '" onclick="indexPage.setTVVolume(\'' + _obj.serialNumber + '\',\'' + _obj.onlineState + '\')">设置音量</td>\
<td style="cursor:pointer;" class="' + (_obj.onlineState == 1 ? "" : " nouse") + '" onclick="indexPage.setTVRestart(\'' + _obj.serialNumber + '\',\'' + _obj.onlineState + '\')">设备重启</td></tr>\
</table>\
</div>\
<div class="TVLi_divBtn2" style="' + (_obj.onlineState == 1 ? "" : " color:#999 !important;background:rgba(0,0,0,0.3)") + '" onclick="indexPage.showTVScreenshot(\'' + _obj.serialNumber + '\',\'' + _obj.onlineState + '\')">\
查看发布内容\
</div>\
</div>';
$(".TVLi_Div[data-id^='" + _obj.serialNumber + td + "']").attr("class", "TVLi_Div offline");
$(".TVLi_Div[data-id^='" + _obj.serialNumber + td + "']").html(html); var tvmodel = WT3DObj.commonFunc.findObject("devLogo_TV_" + _obj.id + "_" + _obj.name)
if (tvmodel) {
var textture = WT3DObj.createSkinPic(WT3DObj, null, null, {
imgurl: "../img/icons/tvLogo_offline.png",
});
tvmodel.material.map = textture;
}
}
IndexPage.prototype.TVCloseOpenBtn = function (devControlBtnId, state) {
if (state != "1") {
//layer.msg("设备离线，无法控制");
return;
} var className = $("#" + devControlBtnId).attr("class");
var devid = devControlBtnId.split("_")[devControlBtnId.split("_").length - 1];
if (className.indexOf("closeBtn") >= 0) {
layer.confirm("是否确认关机", { title: "远程关机" }, function () {
var loadindex = layer.load();
var data = {
data: [devid]
}
webapi.TVDoAction(data, "shutdown", function (res) {
if (res.status == 200) {
layer.closeAll(); var tvlist = webapi.DeviceListCache["deviceType_" + config.TV.deviceTypeId];
if (tvlist && tvlist.length > 0) { $.each(tvlist, function (_index, _obj) {
if (_obj.serialNumber == devid) {
indexPage.changeTVDetail(_obj, "");
indexPage.changeTVDetail(_obj,"3d");
}
});
} layer.msg("远程关机成功");
// $("#" + devControlBtnId).attr("class", "doorLi_openClose closeBtn");
} else {
console.log(res);
layer.msg("远程关机异常：" + res.msg);
}
layer.close(loadindex);
})
}, function () { })
}
}
IndexPage.prototype.setTVRestart = function (id, state) {
if (state != "1") {
// layer.msg("设备离线，无法控制");
return;
}
layer.confirm("是否确认重启", {
title: "重启设备"
}, function () {
layer.msg("重启命令已发送");
var loadindex = layer.load();
var data = {
data: [id]
}
webapi.TVDoAction(data, "reboot", function (res) {
console.log(res);
layer.close(loadindex);
if (res.status == 200) {
layer.closeAll();
layer.msg("重启命令成功！");
} else {
layer.msg("命令发送失败：" + res.msg);
}
})
}, function () { })
}
IndexPage.prototype.setTVVolume = function (id, state) {
if (state != "1") {
// layer.msg("设备离线，无法控制");
return;
}
layer.confirm('<div style="float:left;width:80px;margin-top:20px;">音量设置：</div><div style="float:left;width:150px;margin-top:30px;" id="slideTest1" class="demo-slider"> </div><input type="hidden" id="slideTest1Value" />', {
title: "音量设置",
success: function () {
layui.use('slider', function () {
var $ = layui.$
, slider = layui.slider;
//默认滑块
slider.render({
elem: '#slideTest1',
change: function (value) {
$("#slideTest1Value").val(value);
console.log('当前数值：' + value);
}
});
});
}
}, function () {
var loadindex = layer.load();
var data = {
data: [id],
volume: parseInt($("#slideTest1Value").val())
}
webapi.TVDoAction(data, "setVolume", function (res) {
console.log(res);
layer.close(loadindex);
if (res.status == 200) {
layer.closeAll();
layer.msg("音量设置成功！");
} else {
layer.msg("命令发送失败：" + res.msg);
}
})
}, function () { })
}
IndexPage.prototype.showTVScreenshot = function (id, state) {
if (state != "1") {
// layer.msg("设备离线，无法控制");
return;
}
layer.load();
webapi.getTVScreenshot(id, function (res) {
layer.closeAll();
console.log(res);
if (res.status == 200 && res.data) {
var width = res.data.width;
var height = res.data.height;
if (width > 1000) {
width = 1000;
height = height * 1000 / res.data.width;
}
if (window.parent && window.parent.parent && window.parent.parent.openAutoRoute) {
window.parent.parent.openAutoRoute();
}
layer.open({
type: 1,
shade: 0.8,
skin: 'myLayer',
title: res.data.programName + "-信息展示",
area: [width + "px", (height + 50) + "px"],
content: "<img src='" + res.data.img + "' style='width:" + width + ";height:" + height + "px'/>",
cancel: function () {
if (window.parent && window.parent.parent && window.parent.parent.closeAutoRoute) {
window.parent.parent.closeAutoRoute();
}
},
success: function () {
}
});
} else {
layer.msg("获取失败：" + res.msg); }
})
}
//=============电梯==========================
IndexPage.prototype.liftPage = function (id, name) {
$("#chart_" + id).show();
createCSystemStatic(id, name, config.lift.deviceTypeId,true); var data = indexPage.liftVideoCache;
if (data && data.length > 0) {
$("#lift_title_1").html(data[0].label);
$("#lift_title_2").html(data[1].label);
indexPage.commonFunc.addVideo("lift_video1", config.videoBaseUrl, data[0].value);
$("#lift_video1_title").html(data[0].label);
indexPage.commonFunc.addVideo("lift_video2", config.videoBaseUrl, data[1].value);
$("#lift_video2_title").html(data[1].label);
} }
IndexPage.prototype.showVideoWin = function (index) {
var data = indexPage.liftVideoCache;
var videoobj = data[index];
if (window.parent && window.parent.parent && window.parent.parent.openAutoRoute) {
window.parent.parent.openAutoRoute();
} html = '<div class="videoShowDiv" style="width: 190px;height:110px; float: left;">\
<video id="videoDetail_' + index + '" muted playsinline controls style="width:450px; height:300px;position:relative;"></video>\
<div id="playbtn_' + index + '" style="position:relative;bottom:200px;width:100%;height:60px;padding-left:200px;cursor:pointer;" ><img onclick="$(\'#playbtn_' + index + '\').hide();indexPage.commonFunc.addVideo(\'videoDetail_' + index + '\', \'' + config.videoBaseUrl + '\', \'' + videoobj.value + '\');" src="../img/pics/icons/play-filling.png" style="width:60px;height:60px;"/></div>\
</div>';
layer.open({
type: 1,
shade: 0.8,
skin: 'myLayer',
title: videoobj.label + "-实时视频",
area: ["450px", "350px"],
content: html,
cancel: function () {
if (window.parent && window.parent.parent && window.parent.parent.closeAutoRoute) {
window.parent.parent.closeAutoRoute();
}
},
success: function () {
}
});
}
//=============消防==============================
IndexPage.prototype.firePage = function (id, name) {
$("#chart_" + id).show();
createCSystemStatic(id, name, config.fire.deviceTypeId); }
//==============空调=============================
IndexPage.prototype.aircontrolPage = function (id, name) {
var _this = this;
$("#chart_" + id).show();
createCSystemStatic(id, name, config.aircontrol.deviceTypeId, false, function (result) {
_this.showAircontrolListDetail(result);
});
}
IndexPage.prototype.showAircontrolListDetail = function (result) {
var _this = this;
var html = "";
var meteids = [];
result = result.sort(function (a, b) { return b.onlineState - a.onlineState });
result = result.sort(function (a, b) { return b.type - a.type });
$.each(result, function (_index, _obj) {
html += _this.showAircontrolDetail(_obj);
$.each(_obj.extra, function (_eindex, _eobj) {
if (_eobj.key == "开关") {
meteids.push(_eobj.value);
}
if (_eobj.key == "模式") {
meteids.push(_eobj.value);
}
if (_eobj.key == "温度") {
meteids.push(_eobj.value);
}
});
});
$("#aircontrol_2").html(html);
_this.getOpenCloseState(meteids);
}
IndexPage.prototype.showAircontrolDetail = function (_obj, td) {
var data_openid = "";
var data_zlid = "";
var data_tempid = "";
var data_ms = "";
var data_temp = "";
$.each(_obj.extra, function (_eindex, _eobj) {
if (_eobj.key == "开关") {
data_openid = _eobj.value;
}
if (_eobj.key == "模式") {
data_ms = _eobj.value;
}
if (_eobj.key == "温度") {
data_temp = _eobj.value;
}
if (_eobj.key == "模式控制") {
data_zlid = _eobj.value;
}
if (_eobj.key == "温度控制") {
data_tempid = _eobj.value;
}
});
var html = '<div class="airControlLi_Div' + (_obj.onlineState == 1 ? "" : " offline") + '"">\
<div class="airControlLi_DivTop">' + (_obj.type == 1 ? '<img src="../img/pics/icons/cumputer.png" style="width:14px;height:14px;float:left; margin-top: 8px;" />' : "") + '\
<font class="airControlLi_DivTopName" title="' + _obj.name + '">' + _obj.name + '</font>\
<font class="airControlLi_DivTopState">' + (_obj.onlineState == 1 ? "在线" : "离线") + '</font>\
</div>\
<div class="airControlLi_DivBottom">\
<div class="airControlLi_DivBottomImg" id="airControlLi_DivBottomImg_' + (td ? td + "_" : "") + _obj.serialNumber + '" data-modelmeteid="' + data_ms + '">\
<font class="airControlLi_modelValue" data-modelopenid="' + data_openid + '" data-modelmeteid="' + data_ms + '">模式</font><font class="airControlLi_tempValue" data-tempopenid="' + data_openid + '" data-tempmeteid="' + data_temp + '">温度</font>\
</div>\
<div class="airControlLi_divBtn1">\
<font style="float:left;">空调开关：</font>\
<div style="cursor:pointer;" class="airControlLi_openClose" data-openid="' + data_openid + '" id="airControlCloseOpenBtn_' + (td ? td + "_" : "") + _obj.serialNumber + '" onclick="indexPage.airControlCloseOpenBtn(\'' + ("airControlCloseOpenBtn_" + (td ? td + "_" : "") + _obj.serialNumber) + '\')">开</div>\
</div>\
<div class="airControlLi_divBtn3">\
<div class="airControlLi_btn_1" id="airControlBtn1_' + (td ? td + "_" : "") + _obj.serialNumber + '" data-openmeteid="' + data_openid + '" onclick="indexPage.setCoolTemp(\'' + _obj.serialNumber + "\'" + (td ? ",\'" + td + "\'" : "") + ')" >\
<img src="../img/pics/icons/voiceBtn2.png" style="width:10px;height:10px;display:none;" />制冷\
</div>\
<div class="airControlLi_btn_1" id="airControlBtn2_' + (td ? td + "_" : "") + _obj.serialNumber + '" data-openmeteid="' + data_openid + '" onclick="indexPage.setHotTemp(\'' + _obj.serialNumber + "\'" + (td ? ",\'" + td + "\'" : "") + ')" >\
<img src="../img/pics/icons/voiceBtn2.png" style="width:10px;height:10px;display:none;" />制热\
</div>\
</div>\
<div class="airControlLi_divBtn2" id="airControlBtn3_' + (td ? td + "_" : "") + _obj.serialNumber + '" data-openmeteid="' + data_openid + '" onclick="indexPage.setAirConfigTempTure(\'' + _obj.serialNumber + "\'" + (td ? ",\'" + td + "\'" : "") + ')">\
温度调节\
</div>\
<div class="airControlLi_divBtn4">\
位置：' + _obj.shortAddress + '\
</div>\
</div>\
</div>';
return html;
}
IndexPage.prototype.getOpenCloseState= function (meteIDs) {
webapi.bulkGetRealTimeData(meteIDs, function (data) {
if (data && data.length > 0) {
$.each(data, function (_dindex, _dobj) { $("div[data-modelmeteid='" + _dobj.pointId + "']").css("color", _dobj.value + "" == "2" ? "#C3EEFF" : "#FF8484");
$("font[data-modelmeteid='" + _dobj.pointId + "']").html( _dobj.value+""=="2"?"制冷":"制热");
$("font[data-tempmeteid='" + _dobj.pointId + "']").html( _dobj.value + "℃"); $("div[data-openid='" + _dobj.pointId + "']").attr("data-state", _dobj.value)
$(".airControlLi_btn_1[data-openmeteid='" + _dobj.pointId + "']").attr("data-state", _dobj.value)
$(".airControlLi_divBtn2[data-openmeteid='" + _dobj.pointId + "']").attr("data-state", _dobj.value)
if (_dobj.value + "" == "0") {
$("font[data-modelopenid='" + _dobj.pointId + "']").hide();
$("font[data-tempopenid='" + _dobj.pointId + "']").hide(); $("div[data-openid='" + _dobj.pointId + "']").html("关")
$("div[data-openid='" + _dobj.pointId + "']").attr("class", "airControlLi_openClose closeBtn")
$(".airControlLi_btn_1[data-openmeteid='" + _dobj.pointId + "']").attr("class", "airControlLi_btn_1 nouse");
$(".airControlLi_divBtn2[data-openmeteid='" + _dobj.pointId + "']").attr("class", "airControlLi_divBtn2 nouse");
}else{
$("font[data-modelopenid='" + _dobj.pointId + "']").show();
$("font[data-tempopenid='" + _dobj.pointId + "']").show();
$("div[data-openid='" + _dobj.pointId + "']").html("开")
$("div[data-openid='" + _dobj.pointId + "']").attr("class", "airControlLi_openClose")
$(".airControlLi_btn_1[data-openmeteid='" + _dobj.pointId + "']").attr("class", "airControlLi_btn_1");
$(".airControlLi_divBtn2[data-openmeteid='" + _dobj.pointId + "']").attr("class", "airControlLi_divBtn2");
}
});
}
})
}
IndexPage.prototype.setCoolTemp = function (serialNumber,td) {
if ($("#airControlBtn1_" +(td ? td + "_" : "") + serialNumber).attr("data-state")=="0") { return;
}
layer.confirm("是否确认调节为制冷模式", { title: "调节为制冷模式" }, function () {
var loadindex=layer.load();
var meteid = "";
var airlist = webapi.DeviceListCache["deviceType_" + config.aircontrol.deviceTypeId];
if (airlist && airlist.length > 0) { $.each(airlist, function (_index,_obj) {
if (_obj.serialNumber == serialNumber) {
$.each(_obj.extra, function (_eindex, _eobj) {
if (_eobj.key == "模式控制") {
meteid = _eobj.value;
}
})
}
});
}
webapi.bulkSetRealTimeData(meteid, 2, function (res) {
layer.close(loadindex);
if (res.status == 200) {
layer.closeAll();
layer.msg("调节为制冷模式成功");
} else {
console.log(res);
layer.msg("调节为制冷模式异常：" + res.msg);
}
})
}, function () { })
}
IndexPage.prototype.setHotTemp = function (serialNumber, td) { if ($("#airControlBtn2_" +(td ? td + "_" : "") + serialNumber).attr("data-state") == "0") { return;
}
layer.confirm("是否确认调节为制热模式", { title: "调节为制热模式" }, function () {
var loadindex = layer.load();
var meteid = "";
var airlist = webapi.DeviceListCache["deviceType_" + config.aircontrol.deviceTypeId];
if (airlist && airlist.length > 0) {
$.each(airlist, function (_index, _obj) {
if (_obj.serialNumber == serialNumber) {
$.each(_obj.extra, function (_eindex, _eobj) {
if (_eobj.key == "模式控制") {
meteid = _eobj.value;
}
})
}
});
}
webapi.bulkSetRealTimeData(meteid,1, function (res) {
layer.close(loadindex);
if (res.status == 200) {
layer.closeAll();
layer.msg("调节为制热模式成功");
} else {
console.log(res);
layer.msg("调节为制热模式异常：" + res.msg);
}
})
}, function () { })
}
IndexPage.prototype.airControlCloseOpenBtn = function (devControlBtnId) {
var className = $("#" + devControlBtnId).attr("class");
var serialNumber = devControlBtnId.split("_")[devControlBtnId.split("_").length - 1];
if (className.indexOf("closeBtn")< 0) {
layer.confirm("是否确认关闭", { title: "远程关闭" }, function () {
var loadindex = layer.load();
var meteid = "";
var airlist = webapi.DeviceListCache["deviceType_" + config.aircontrol.deviceTypeId];
if (airlist && airlist.length > 0) {
$.each(airlist, function (_index, _obj) {
if (_obj.serialNumber == serialNumber) {
$.each(_obj.extra, function (_eindex, _eobj) {
if (_eobj.key == "开关控制") {
meteid = _eobj.value;
}
})
}
});
}
webapi.bulkSetRealTimeData(meteid, 0, function (res) {
layer.close(loadindex);
if (res.status == 200) {
layer.closeAll();
layer.msg("远程关闭成功");
//修改按钮样式
$("#" + devControlBtnId).attr("class", "airControlLi_openClose closeBtn");
$("#" + devControlBtnId).html("关");
$("#airControlBtn1_" + serialNumber).attr("class", "airControlLi_btn_1 nouse");
$("#airControlBtn2_" + serialNumber).attr("class", "airControlLi_btn_1 nouse");
$("#airControlBtn3_" + serialNumber).attr("class", "airControlLi_divBtn2 nouse");
$("#airControlBtn1_" + serialNumber).attr("data-state", "0");
$("#airControlBtn2_" + serialNumber).attr("data-state", "0");
$("#airControlBtn3_" + serialNumber).attr("data-state", "0");
$("#airControlLi_DivBottomImg_" + serialNumber+" font").hide(); } else {
console.log(res);
layer.msg("远程关闭异常：" + res.msg);
}
})
}, function () { })
} else {
layer.confirm("远程开启", { title: "远程开启" }, function () {
var loadindex = layer.load();
var timelong = parseInt($("#timeLong").val());
var meteid = "";
var airlist = webapi.DeviceListCache["deviceType_" + config.aircontrol.deviceTypeId];
if (airlist && airlist.length > 0) {
$.each(airlist, function (_index, _obj) {
if (_obj.serialNumber == serialNumber) {
$.each(_obj.extra, function (_eindex, _eobj) {
if (_eobj.key == "开关控制") {
meteid = _eobj.value;
}
})
}
});
}
webapi.bulkSetRealTimeData(meteid, 1, function (res) {
layer.close(loadindex);
if (res.status == 200) {
layer.closeAll();
layer.msg("远程开启成功"); //修改按钮样式
$("#" + devControlBtnId).attr("class", "airControlLi_openClose");
$("#" + devControlBtnId).html("开"); $("#airControlBtn1_" + serialNumber).attr("class", "airControlLi_btn_1");
$("#airControlBtn2_" + serialNumber).attr("class", "airControlLi_btn_1");
$("#airControlBtn3_" + serialNumber).attr("class", "airControlLi_divBtn2"); $("#airControlBtn1_" + serialNumber).attr("data-state", "1");
$("#airControlBtn2_" + serialNumber).attr("data-state", "1");
$("#airControlBtn3_" + serialNumber).attr("data-state", "1"); $("#airControlLi_DivBottomImg_" + serialNumber + " font").show();
} else {
console.log(res);
layer.msg("远程开启失败：" + res.msg);
}
})
}, function () { })
}
}
IndexPage.prototype.setAirConfigTempTure = function (serialNumber, td) { if ($("#airControlBtn3_" +(td ? td + "_" : "") + serialNumber).attr("data-state") == "0") {
return;
}
layer.confirm('<div style="float:left;width:80px;margin-top:20px;">温度：</div><div style="float:left;width:150px;margin-top:30px;" id="slideTest1" class="demo-slider"></div><input type="hidden" id="slideTest1Value" />', {
title: "温度设置",
success: function (){
layui.use('slider', function () {
var $ = layui.$
, slider = layui.slider;
//默认滑块 var ins1 = slider.render({
elem: '#slideTest1',
min: 16 //最小值
, max: 30, //最大值
change: function (value) {
$("#slideTest1Value").val(value);
// console.log('当前数值：' + value);
}
}); //获取值
var meteid = "";
var airlist = webapi.DeviceListCache["deviceType_" + config.aircontrol.deviceTypeId];
if (airlist && airlist.length > 0) {
$.each(airlist, function (_index, _obj) {
if (_obj.serialNumber == serialNumber) {
$.each(_obj.extra, function (_eindex, _eobj) {
if (_eobj.key == "温度") {
meteid = _eobj.value;
}
})
}
});
}
webapi.bulkGetRealTimeData([meteid], function (data) {
if (data && data.length > 0) {
$.each(data, function (_dindex, _dobj) {
ins1.setValue(parseInt(_dobj.value)-16);
});
}
}) }); }
}, function () { var loadindex = layer.load();
var meteid = "";
var airlist = webapi.DeviceListCache["deviceType_" + config.aircontrol.deviceTypeId];
if (airlist && airlist.length > 0) {
$.each(airlist, function (_index, _obj) {
if (_obj.serialNumber == serialNumber) {
$.each(_obj.extra, function (_eindex, _eobj) {
if (_eobj.key == "温度控制") {
meteid = _eobj.value;
}
})
}
});
}
webapi.bulkSetRealTimeData(meteid, parseInt($("#slideTest1Value").val()), function (res) {
layer.close(loadindex);
console.log(res);
if (res.status == 200) {
layer.closeAll();
layer.msg("设置成功！");
} else {
layer.msg("命令发送失败：" + res.msg);
}
})
}, function () { }) }
//===============环境============================
IndexPage.prototype.environmentPage = function (id, name) {
var _this = this;
$("#chart_" + id).show();
createCSystemStatic(id, name, config.environment.deviceTypeId, false, function (result) {
_this.showEnvironmentListDetail(result);
});
} IndexPage.prototype.showEnvironmentListDetail = function (result) {
var _this = this;
var html = "";
var meteids = [];
result = result.sort(function (a, b) { return b.onlineState - a.onlineState });
$.each(result, function (_index, _obj) {
var hobj = _this.showEnvironmentDetail(_obj);
html += hobj.html;
meteids = meteids.concat(hobj.meteids);
});
$("#environment_2").html(html);
setTimeout(function () {
_this.flashEnvironmentDetailValue(meteids);
}, 200);
if (_this.flashEnvironmentDetailValueInterval) {
clearInterval(_this.flashEnvironmentDetailValueInterval);
}
_this.flashEnvironmentDetailValueInterval = setInterval(function () {
if (_this.currentMebuType == "environment" && meteids.length>0) {
_this.flashEnvironmentDetailValue(meteids);
} else {
clearInterval(_this.flashEnvironmentDetailValueInterval);
}
},5000);
}
IndexPage.prototype.flashEnvironmentDetailValueInterval = null;
IndexPage.prototype.flashEnvironmentDetailValue = function (meteids) {
var _this=this;
webapi.bulkGetRealTimeData(meteids, function (data) {
if (data && data.length > 0) {
$.each(data, function (_dindex, _dobj) {
var keyname = $("#devParamValue_" + _dobj.pointId).attr("data-keyname");
if (keyname) {
if (keyname.indexOf("温度") >= 0) {
_dobj.value += "℃";
} else if (keyname.indexOf("湿度") >= 0) {
_dobj.value += "%";
}
}
console.log("#devParamValue_" + _dobj.pointId)
console.log(_dobj.value)
$("#devParamValue_" + _dobj.pointId).html(_dobj.value);
});
}
}); }
IndexPage.prototype.showEnvironmentDetail = function (_obj) {
var html = ' <div class="fireLi_Div' + (_obj.onlineState == 1 ? "" : " offline") + '" style="height:auto;">\
<div class="fireLi_DivTop">\
<font class="fireLi_DivTopName" title="' + _obj.name + '">' + _obj.name + '</font>\
<font class="fireLi_DivTopState">' + (_obj.onlineState == 1 ? "在线" : "离线") + '</font>\
</div>\
<div class="fireLi_DivContent">';
var meteids = [];
if (_obj && _obj.extra && _obj.extra.length > 0) { $.each(_obj.extra, function (_eindex, _eobj) {
if (_eobj.key.indexOf("控制") < 0) {
html += ' <div class="fireLi_DivMete">\
<div class="fireLi_DivMeteName">\
' + _eobj.key+ '：\
</div>\
<div class="fireLi_DivMeteValue" data-keyname="' + _eobj.key + '" id="devParamValue_' + _eobj.value + '">\
<img src="../plugs/layer/layui/css/modules/layer/default/loading-1.gif" style="width:16px;height:16px;" />\
</div>\
</div>';
meteids.push(_eobj.value);
}
});
}
html += ' </div>\
<div class="fireLi_DivBottom">\
<div class="fireLi_divBtn1">\
<font style="float:left;margin-left: 27px;">位置：</font>\
<font style="float:left;">' + _obj.shortAddress + '</font>\
</div>\
<div class="fireLi_divBtn2" onclick="indexPage.showEDevAlarmListByDev(\'' + _obj.serialNumber + '\')">\
查看报警记录\
</div>\
</div>\
</div>';
return {
html:html,
meteids:meteids
};
}
IndexPage.prototype.showMetesValueDetail = function (objname) { var devType = objname.split("_")[1];
var devId = objname.split("_")[3];
var devName = objname.split("_")[4];
var devdatas = modelList[devType].data;
var devinfo = null;
$.each(devdatas, function (_index, _obj) {
if (_obj.id == devId) {
devinfo = _obj;
}
})
var html = ' <div class="fireLi_Div3D" id="showMetes_' + devId + '">\
<div class="fireLi_DivTop3D" >\
<font class="fireLi_DivTopName3D" title="' + devName + '">' + devName + '</font>\
</div>\
<div class="fireLi_DivContent" id="showMeteContent3D_' + devId + '" style="height: 90px;overflow-y: auto;"><img src="../plugs/layer/layui/css/modules/layer/default/loading-1.gif" style="width:16px;height:16px;margin-top:30px;margin-left:200px;" />';
html += ' </div>\
<div class="fireLi_DivBottom">\
<div class="fireLi_divBtn1">\
<font style="float:left;margin-left: 27px;">位置：</font>\
<font style="float:left;">' + devinfo.shortAddress + '</font>\
</div>\
<div class="fireLi_divBtn2" onclick="indexPage.showAllMeteListByDev(\'' + devId + '\')">\
查看更多\
</div>\
</div>\
</div>';
setTimeout(function () {
webapi.getDevValue(devId, function (response) {
if (response && response.result ) {
_obj = response.result;
if (_obj && _obj.values && _obj.values.length > 0) {
var _mhtml = "";
$.each(_obj.values, function (_eindex, _eobj) {
{
if(_eobj.key){ _eobj.sValue2 = _eobj.sValue;
if (_eobj.sValue == "END") {
_eobj.sValue2 = "无告警"
} else if (_eobj.sValue == "BEGIN") {
_eobj.sValue2 = "<font style='color:red;'>告警</font>"
} _mhtml += ' <div class="fireLi_DivMete" style="width:50%;">\
<div class="fireLi_DivMeteName" style="width:65%;">\
' + _eobj.meteName + '：\
</div>\
<div class="fireLi_DivMeteValue" style="width:35%;">' + _eobj.sValue2 + (_eobj.unit ? _eobj.unit : "") + '\
</div>\
</div>';
}
}
});
if (_obj.objState == "OFFLINE") { $("#showMetes_" + devId).attr("class", "fireLi_Div3D offline");
}
$("#showMeteContent3D_" + devId).html(_mhtml);
}
} else {
console.log("error:获取设备失败,eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee");
}
});
}, 200);
return html; } IndexPage.prototype.showAirControlMetesValueDetail = function (seobj) {
var _obj = seobj;
var html = ' <div class="fireLi_Div3D' + (_obj.onlineState == 1 ? "" : " offline") + '" style="width:270px;">\
<div class="fireLi_DivTop3D">\
<font class="fireLi_DivTopName3D" title="' + _obj.name + '">' + _obj.name + '</font>\
</div>\
<div class="fireLi_DivContent">';
var meteids = [];
if (_obj && _obj.extra && _obj.extra.length > 0) { $.each(_obj.extra, function (_eindex, _eobj) {
if (_eobj.key.indexOf("控制") < 0) {
html += ' <div class="fireLi_DivMete" style="width:50%;">\
<div class="fireLi_DivMeteName">\
' + _eobj.key + '：\
</div>\
<div class="fireLi_DivMeteValue" data-keyname="' + _eobj.key + '" id="devParamValue3D_' + _eobj.value + '">\
<img src="../plugs/layer/layui/css/modules/layer/default/loading-1.gif" style="width:16px;height:16px;" />\
</div>\
</div>';
meteids.push(_eobj.value);
}
}); }
html += ' </div>\
<div class="fireLi_DivBottom">\
<div class="fireLi_divBtn1">\
<font style="float:left;margin-left: 27px;">位置：</font>\
<font style="float:left;">' + _obj.shortAddress + '</font>\
</div>\
</div>\
</div>';
webapi.bulkGetRealTimeData(meteids, function (data) {
if (data && data.length > 0) {
$.each(data, function (_dindex, _dobj) {
var keyname = $("#devParamValue3D_" + _dobj.pointId).attr("data-keyname");
if (keyname) { if (keyname.indexOf("开关") >= 0) {
_dobj.value = (_dobj.value == 0 ? "关" : "开");
} else if (keyname.indexOf("模式") >= 0) {
_dobj.value = (_dobj.value == 1 ? "制热" : "制冷");
} else if (keyname.indexOf("报警状态") >= 0) {
_dobj.value = (_dobj.value == 0 ? "正常" : "<font style='color:red;'>告警</font>");
} else if (keyname.indexOf("状态") >= 0) {
_dobj.value = (_dobj.value == 0 ? "停止" : "<font style='color:red;'>开启</font>");
}
}
$("#devParamValue3D_" + _dobj.pointId).html(_dobj.value);
$("#devParamValue_" + _dobj.pointId).html(_dobj.value);
});
}
})
return html; } IndexPage.prototype.showAllMeteListByDev = function (devId) {
$('#devMeteListResult').html("");
var _this = this;
layer.open({
type: 1,
shade: 0.8,
skin: 'myLayer',
title: false,
area: ["700px", "615px"],
content: $('#devAllMeteList'),
colseBtn: 0,
cancel: function () { },
success: function () { webapi.getDevValue(devId, function (response) {
if (response && response.result) { _obj = response.result;
$("#devTitle").html(_obj.objName )
if (_obj && _obj.values && _obj.values.length > 0) {
var _mhtml = "";
_obj.values = _obj.values.sort(function (a, b) { return a.sort - b.sort });
$.each(_obj.values, function (_eindex, _eobj) {
if (_eobj.key) { _eobj.sValue2 = _eobj.sValue;
if (_eobj.sValue == "END") {
_eobj.sValue2 = "无告警"
} else if (_eobj.sValue == "BEGIN") {
_eobj.sValue2 = "<font style='color:red;'>告警</font>"
} _mhtml += ' <div class="fireLi_DivMete" style="width:50%;border: 1px solid rgba(255,255,255,0.1);">\
<div class="fireLi_DivMeteName" style="width:65%;text-align:center;">\
' + _eobj.meteName + '：\
</div>\
<div class="fireLi_DivMeteValue" style="width:35%;text-align:center;">' + _eobj.sValue2 + '\
</div>\
</div>'; }
});
_mhtml += '<div style="background: rgba(115,134,164,0.5);width:100%;border: 1px solid rgba(255,255,255,0.1);"></div>';
$.each(_obj.values, function (_eindex, _eobj) {
if (!_eobj.key) { _eobj.sValue2 = _eobj.sValue;
if (_eobj.sValue == "END") {
_eobj.sValue2 = "无告警"
} else if (_eobj.sValue == "BEGIN") {
_eobj.sValue2 = "<font style='color:red;'>告警</font>"
} _mhtml += ' <div class="fireLi_DivMete" style="width:50%;border: 1px solid rgba(255,255,255,0.1);">\
<div class="fireLi_DivMeteName" style="width:65%;text-align:center;">\
' + _eobj.meteName + '：\
</div>\
<div class="fireLi_DivMeteValue" style="width:35%;text-align:center;">' + _eobj.sValue2 + '\
</div>\
</div>'; }
});
$("#devMeteListResult").html(_mhtml);
}
} else {
console.log("error:获取设备失败,eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee");
}
}); }
}); }
IndexPage.prototype.showEDevAlarmListByDev = function (devId) { var _this = this;
layer.open({
type: 1,
shade: 0.8,
skin: 'myLayer',
title: false,
area: ["700px", "615px"],
content: $('#devAlarmList'),
colseBtn:0,
cancel: function () {
_this.runAutoRoute = false;
if (indexPage.showAutoRunRouteTimeIndex) {
clearTimeout(indexPage.showAutoRunRouteTimeIndex);
}
if (window.parent && window.parent.parent && window.parent.parent.closeAutoRoute) {
window.parent.parent.closeAutoRoute();
}
},
success: function () { var StartTime = new Date().format("yyyy-MM-01 00:00:00");
var EndTime = new Date().format("yyyy-MM-dd hh:mm:ss");
$("#alarmStartTime").val(StartTime);
$("#alarmEndTime").val(EndTime);
$("#selectEAlarmDevid").val(devId);
_this.showAlarmListByDev(devId, StartTime, EndTime);
}
});
}
IndexPage.prototype.showAlarmListByDev = function (devId, StartTime, EndTime) {
var layerLoadindex = layer.load();
webapi.getAlarmDataList(function (records) {
layer.close(layerLoadindex);
if (records && records.length > 0) {
if ($("#alarmDevSort").val() == 1) {
records = records.sort(function (a, b) { return new Date(a.createTime).getTime() - new Date(b.createTime).getTime()
})
} else {
records = records.sort(function (a, b) {
return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
})
}
console.log(records);
var _html = '';
$.each(records, function (_index, _obj) { if (_obj.device) {
_html += '<div style="float:left;width:99%;">\
<table class="devAlarmTable">\
<tr>\
<td class="devAlarm_paramName">报警类型</td>\
<td class="devAlarm_paramValue">' + _obj.message + '</td>\
<td class="devAlarm_paramName">报警时间</td>\
<td class="devAlarm_paramValue">' + _obj.createTime + '</td>\
<td class="devAlarm_paramName">解除时间</td>\
<td class="devAlarm_paramValue">' + _obj.updateTime + '</td>\
</tr>\
</table>\
</div>';
}
});
$("#devAlarmListResult").html(_html);
} else {
$("#devAlarmListResult").html("<div style='width:100%;text-align:center;'>查无数据</div>"); }
}, devId,StartTime, EndTime); }
//==============广播============================
IndexPage.prototype.radioPage = function (id, name) {
var _this = this;
$("#chart_" + id).show();
createCSystemStatic(id, name, config.radio.deviceTypeId, false, function (result) {
_this.showRadioListDetail(result);
});
}
IndexPage.prototype.showRadioListDetail = function (result) {
var _this = this;
var html = "";
result = result.sort(function (a, b) { return b.onlineState - a.onlineState });
$.each(result, function (_index, _obj) {
html += _this.showRadioDetail(_obj);
});
$("#radio_2").html(html);
}
IndexPage.prototype.showRadioDetail = function (_obj, td) { var html = ' <div class="radioLi_Div' + (_obj.onlineState == 1 ? "" : " offline") + '"">\
<div class="radioLi_DivTop">\
<font class="radioLi_DivTopName" title="' + _obj.name + '">' + _obj.name + '</font>\
<font class="radioLi_DivTopState">' + (_obj.onlineState == 1 ? "在线" : "离线") + '</font>\
</div>\
<div class="radioLi_DivBottom">\
<img class="radioLi_DivBottomImg" src="../img/pics/icons/radioPic2.png" />\
<div class="radioLi_divBtn1">\
<font style="float:left;">音量调节：</font>\
<div style="cursor:pointer;line-height:30px;" class="' + (_obj.onlineState == 1 ? "" : " nouse") + '" onclick="indexPage.setRadioVolume(\'' + _obj.serialNumber + '\',\'' + _obj.onlineState + '\')">\
<img src="../img/pics/icons/voiceBtn2.png" style="width:25px;height:25px;"/>\
</div>\
</div>\
</div>\
</div>';
//<div style="cursor:pointer;" class="radioLi_openClose closeBtn" id="radioCloseOpenBtn_' + (td ? td + "_" : "") + _obj.serialNumber + '" onclick="indexPage.RadioCloseOpenBtn(\'' + ("radioCloseOpenBtn_" + (td ? td + "_" : "") + _obj.serialNumber) + '\')">开</div>\
return html;
} IndexPage.prototype.setRadioVolume = function (id, state) {
if (state != "1") {
layer.msg("设备离线，无法控制");
return;
}
layer.confirm('<div style="float:left;width:80px;margin-top:20px;">音量设置：</div><div style="float:left;width:150px;margin-top:30px;" id="slideTest1" class="demo-slider"> </div><input type="hidden" id="slideTest1Value" />', {
title: "音量设置",
success: function () {
layui.use('slider', function () {
var $ = layui.$
, slider = layui.slider;
//默认滑块
slider.render({
elem: '#slideTest1',
min: 0 //最小值
, max: 15, //最大值,
change: function (value) {
$("#slideTest1Value").val(value);
console.log('当前数值：' + value);
}
});
});
}
}, function () {
var data = {
data: [id],
volume: parseInt($("#slideTest1Value").val())
}
webapi.setmachinecodece(id, parseInt($("#slideTest1Value").val()), function (res) {
console.log(res);
if (res.msg && res.status!=200) {
layer.msg(res.msg);
}else{
layer.closeAll();
}
}); }, function () { })
}
IndexPage.prototype.RadioCloseOpenBtn = function (devControlBtnId) {
var className = $("#" + devControlBtnId).attr("class");
var devid = devControlBtnId.split("_")[devControlBtnId.split("_").length - 1];
if (className.indexOf("closeBtn") >= 0) {
layer.msg("远程关机接口异常");
return;
layer.confirm("是否确认关机", { title: "远程关机" }, function () { //webapi.remoteDoorCloseById(devid, function (res) {
// if (res.status == 200) {
// layer.closeAll();
// layer.msg("远程关机成功");
// // $("#" + devControlBtnId).attr("class", "doorLi_openClose closeBtn");
// } else {
// console.log(res);
// layer.msg("远程关机异常：" + res.msg);
// }
//})
}, function () { })
} else {
layer.confirm("开门时长：<input style='width:120px;color:black;' id='timeLong' value='10'/>秒", { title: "远程开门" }, function () {
var timelong = parseInt($("#timeLong").val());
webapi.remoteDoorOpenById(devid, timelong, function (res) {
if (res.status == 200) {
layer.closeAll();
layer.msg("远程开门成功");
$("#" + devControlBtnId).attr("class", "doorLi_openClose");
} else {
console.log(res);
layer.msg("远程开门失败：" + res.msg);
}
})
}, function () { }) }
}
//==============摄像头============================
IndexPage.prototype.videooPage = function (id, name) {
var _this = this;
$("#chart_" + id).show();
createCSystemStatic(id, name, config.video.deviceTypeId, false, function (result) {
_this.showVideoListDetail(result);
});
} IndexPage.prototype.showVideoListDetail = function (result) {
var _this = this;
var html = "";
result = result.sort(function (a, b) { return b.onlineState - a.onlineState });
result = result.sort(function (a, b) { return b.status - a.status });
var showNub = 0;
$.each(result, function (_index, _obj) {
if (showNub < 6) {
showNub++;
html += _this.showVideoDetail(_obj);
}
});
$("#video_2").html(html);
$.each(result, function (_index, _obj) {
if (_index < 6) {
if (_obj.stream) {
indexPage.commonFunc.addVideo("videoList_" + _obj.id, config.videoBaseUrl, _obj.stream)
}
}
}); }
IndexPage.prototype.showVideoDetail = function (_obj) { var html = '<div class="videoShowDiv' + (_obj.onlineState == 1 ? "" : " offline") + '"" style="width: 190px;height:110px; float: left;margin-left:20px;margin-top:15px;">\
<video id="videoList_' + _obj.id + '" muted playsinline controls style="width:190px; height:110px;position:relative;"></video>\
<div class="indexVideoContent" style="position:relative;bottom:46px;">\
<font class="indexVideoTitle">' + _obj.name + '</font>\
<font class="indexVideoState">' + (_obj.onlineState == 1 ? "在线" : "离线") + '</font>\
</div>\
</div>';
return html;
}
//电梯
IndexPage.prototype.showLiftDetailByModel = function (modelName) {
$("#liftNub").html(config.liftRunningDetail[modelName].name);
var cameraId = config.Videos[modelName];
webapi.runningDetail(config.liftRunningDetail[modelName].identifier, function (data) {
$("#nowFloor").html(data.floor);
$("#liftequipmentStatus").html(data.equipmentStatus);
$("#lifttimes").html(data.times);
$("#liftmileage").html(data.mileage);
});
}
function createCSystemStatic(id, count, onlineState) {
$("#chart_" + id).show();
var _html = "<table style='width:100%;height:100%;'><tr><td style='height:120px; widht:50%;' id='" + id + "_chart1'> </td>\
<td style='width:50%;color:white;font-size:16px;line-height:200%;'>\
<table style='width:100%;'>\
<tr><td colspan=2>监测设备总数</td></tr>\
<tr><td style='width:50%'><font style='color:#ff9900;font-size:20px;font-weight:700;' id='right_" + id + "_all'>0</font>/个</td><td></td></tr>\
<tr><td >在线总数</td><td>离线总数</td></tr>\
<tr><td><font style='color:#ff9900;font-size:20px;font-weight:700;' id='right_" + id + "_online'>0</font>/个</td><td><font style='color:#ff9900;font-size:20px;font-weight:700;' id='right_" + id + "_offline'>0</font>/个</td></tr>\
</table >\
</td></tr > ";
_html += "</table>";
$("#" + id + "_chart").html(_html);
$("#right_" + id + "_all").html(count);
$("#right_" + id + "_offline").html(count - onlineState);
$("#right_" + id + "_online").html(onlineState);
var rate = 0;
if (count > 0) {
rate = onlineState / count;
}
createDevRunPercent("index_chart1", rate);
} function createCSystemRoomsStatic(id, count, onlineState) {
$("#chart_" + id).show();
var _html = "<table style='width:100%;height:100%;'><tr><td style='height:120px; widht:50%;' id='" + id + "_chart1'> </td>\
<td style='width:50%;color:white;font-size:16px;line-height:200%;'>\
<table style='width:100%;'>\
<tr><td colspan=2>监测房间数</td></tr>\
<tr><td style='width:50%'><font style='color:#ff9900;font-size:20px;font-weight:700;' id='right_" + id + "_all'>0</font>/个</td><td></td></tr>\
<tr><td >在线总数</td><td>离线总数</td></tr>\
<tr><td><font style='color:#ff9900;font-size:20px;font-weight:700;' id='right_" + id + "_online'>0</font>/个</td><td><font style='color:#ff9900;font-size:20px;font-weight:700;' id='right_" + id + "_offline'>0</font>/个</td></tr>\
</table >\
</td></tr > ";
_html += "</table>";
$("#" + id + "_chart").html(_html);
$("#right_" + id + "_all").html(count);
$("#right_" + id + "_offline").html(count - onlineState);
$("#right_" + id + "_online").html(onlineState);
var rate = 0;
if (count > 0) {
rate = onlineState / count;
}
createDevRunPercent("index_chart1", rate);
}
function createDevRunPercent(id,value) {
$("#" + id).html("<div id='" + id + "_Chart' style='width:100%;height:100%;float:left;'></div>");
var myChart = echarts.init(document.getElementById(id + "_Chart"));
let title = '运行率';
let int = value.toFixed(2).split('.')[0];
let float = value.toFixed(2).split('.')[1];
var percent = parseInt(parseFloat(value.toFixed(2)) * 100)
option = {
title: {
text: '{a|' + percent + '}{b|%}\n{c|' + title + '}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 28,
color: '#fff',
fontWeight: '600',
},
b: {
fontSize: 16,
color: '#fff',
padding: [0, 0, 14, 0]
},
c: {
fontSize: 16,
color: '#fff',
padding: [5, 0]
}
}
}
},
series: [
{
type: 'gauge',
radius: '100%',
clockwise: false,
startAngle: '90',
endAngle: '-269.9999',
splitNumber: 30,
detail: {
offsetCenter: [0, -20],
formatter: ' '
},
pointer: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: [
[0, '#2CFAFC'],
[( 1 - (parseFloat(value.toFixed(2))==1?0.999: parseFloat(value.toFixed(2)))) , '#0ff'],
[1, '#0f232e']
],
width: 20
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 100,
lineStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 255, 255, 1)',
shadowOffsetY: '0',
color: '#020f18',
width: 2
}
},
axisLabel: {
show: false
}
},
{
type: 'pie',
radius: ['74%', '75%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
color: '#0C355E'
}
},
label: {
show: false
},
data: _dashed()
}, {
type: 'pie',
radius: [0, '60%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: '#000',
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: '#0FF',
}, {
offset: 1,
color: '#060f20'
}])
}
},
label: {
show: false
},
data: [100]
},
{
type: 'pie',
radius: ['94%', '95.5%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: 'rgba(0, 255, 255,.3)',
color: '#0f232e'
}
},
label: {
show: false
},
data: [100]
},
{
type: 'pie',
radius: ['98%', '99.5%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: 'rgba(0, 255, 255,.3)',
color: 'rgba(15, 35, 46,.6)',
}
},
label: {
show: false
},
data: [100]
},
]
}; function _dashed() {
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: 'rgb(0,255,255,.3)',
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: 'rgb(0,0,0,0)',
borderWidth: 1,
borderColor: "rgba(0,255,255,1)"
}
}
})
} }
return dataArr }
myChart.setOption(option);
}
//创建在线离线柱状图
function createDevNubs(id, allDates, onlinedatas) {
$("#" + id).html("<div id='" + id + "_Chart' style='width:60%;height:100%;float:left;'></div><div id='" + id +"_Chart2' style='width:40%;height:100%;float:left;'></div>");
{
var myChart = echarts.init(document.getElementById(id + "_Chart"));
var salvProName = ["F13", "F12", "F11", "F10", "F9", "F8", "F7", "F6", "F5", "F4", "F3", "F2", "F1"];
var salvProValue = onlinedatas;
//for (var i = 0; i < 13; i++) {
// salvProValue.push(parseInt(Math.random()*100));
//}
var salvProMax = allDates;//背景按最大值
//for (let i = 0; i < salvProValue.length; i++) {
// salvProMax.push(100)
//}
option = {
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '2%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function (params) {
return params[0].name + ' : ' + params[0].value
}
},
xAxis: {
show: false,
type: 'value'
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: '#fff',fontSize:9
},
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: salvProName
}, {
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: 'rgb(46,200,207,1)',
fontSize: '10'
},
},
data: salvProValue
}],
series: [{
name: '值',
type: 'bar',
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius:9,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgb(46,200,207,0)'
}, {
offset: 1,
color: 'rgb(46,200,207,1)'
}]),
},
},
barWidth: 4,
data: salvProValue
},
{
name: '背景',
type: 'bar',
barWidth: 4,
barGap: '-100%',
data: salvProMax,
itemStyle: {
normal: {
color: 'rgba(24,31,68,1)',
barBorderRadius: 9,
}
},
},
{
name: '检查',
type: 'pictorialBar',
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
symbolSize: [18, 18], symbolPosition: 'end',
symbolOffset: [8, 0],
z: 12,
data: salvProValue
}
]
};
myChart.setOption(option); }
{ var myChart = echarts.init(document.getElementById(id + "_Chart2"));
var salvProName = ["F13", "F12", "F11", "F10", "F9", "F8", "F7", "F6", "F5", "F4", "F3", "F2", "F1"];
var salvProValue = [];
//for (var i = 0; i < 13; i++) {
// salvProValue.push(parseInt(Math.random() *30));
//}
var offlineData = [];
$.each(allDates, function (_i,_o) {
offlineData.push(_o - onlinedatas[_i]);
})
salvProValue = offlineData;
var salvProMax = allDates;//背景按最大值
//for (let i = 0; i < salvProValue.length; i++) {
// salvProMax.push(100)
//}
option = {
grid: {
left: '2%',
right: '2%',
bottom: '0%',
top: '2%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function (params) {
return params[0].name + ' : ' + params[0].value
}
},
xAxis: {
show: false,
type: 'value'
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: false,
textStyle: {
color: '#fff'
},
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: salvProName
}, {
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#ff8D63',
fontSize: '10'
},
},
data: salvProValue
}],
series: [{
name: '值',
type: 'bar',
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 9,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgb(238,141,99,0)'
}, {
offset: 1,
color: '#EE8D63'
}]),
},
},
barWidth: 4,
data: salvProValue
},
{
name: '背景',
type: 'bar',
barWidth: 4,
barGap: '-100%',
data: salvProMax,
itemStyle: {
normal: {
color: 'rgba(24,31,68,1)',
barBorderRadius: 9,
}
},
}
]
};
myChart.setOption(option); }
}
function showDevDetail(objname) {
//devType, devId, devName
//"devLogo_" + _this.functionState + "_" + _obj.type+"_" + _obj.id + "_" + _obj.name; var devType = objname.split("_")[1];
var devId = objname.split("_")[3];
var devName = objname.split("_")[4];
var html = "设备信息";
var height = "150px";
var width = "100px";
{
switch (devType) {
case "rooms": {
html = '<div style="height:40px;text-align:center;font-size:16px;line-height:40px;">';
html += devName+' </div>';
height = "50px"
width = "auto"
} break;
case "xzldb":
case "xfmdyl":
{
html = indexPage.showMetesValueDetail(objname);
height = "160px"
width = "415px"
} break;
case "door": {
html = indexPage.showDoorDetail(devDataInfo, "3d");
setTimeout(function () {
indexPage.getDoorState(true);
}, 200)
height = "220px"
width = "185px"
} break;
case "aircontrol": {
html = indexPage.showAirControlMetesValueDetail(devDataInfo);
height = "150px"
width = "270px"
} break;
case "radio": {
html = indexPage.showRadioDetail(devDataInfo);
height = "220px"
width = "185px" } break;
case "fire": { } break;
case "TV": {
html = indexPage.showTVDetail(devDataInfo, "3d");
height = "250px"
width = "185px"
} break;
case "video": {
html = '<div class="videoShowDiv' + (devDataInfo.onlineState == 1 ? "" : " offline") + '"" style="width: 190px;height:110px; float: left;">\
<video id="videoDetail_' + devDataInfo.id + '" muted playsinline controls style="width:190px; height:110px;position:relative;"></video>\
<div class="indexVideoContent" style="position:relative;bottom:36px;">\
<font class="indexVideoTitle">' + devDataInfo.name + '</font>\
<font class="indexVideoState">' + (devDataInfo.onlineState == 1 ? "在线" : "离线") + '</font>\
</div>\
<div id="playbtn_' + devDataInfo.id + '" style="position:relative;bottom:130px;width:100%;height:60px;padding-left:60px;cursor:pointer;" ><img onclick="$(\'#playbtn_' + devDataInfo.id + '\').hide();indexPage.commonFunc.addVideo(\'videoDetail_' + devDataInfo.id + '\', \'' + config.videoBaseUrl + '\', \'' + devDataInfo.stream + '\');" src="../img/pics/icons/play-filling.png" style="width:60px;height:60px;"/></div>\
</div>';
height = "140px";
width = "220px";
//if (devDataInfo.stream) {
//setTimeout(function () {
//
//}, 1000);
//}
} break;
case "lift": { } break;
}
}
return {
html:html,
width: width,
height: height, };
}
function showDevListByType(devType,list) {
switch (devType) {
case "door": { indexPage.showDoorListDetail(list); } break;
case "aircontrol": { indexPage.showAircontrolListDetail(list); } break;
case "radio": { indexPage.showRadioListDetail(list); } break;
case "fire": { } break;
case "TV": {indexPage.showTVListDetail(list);} break;
case "video": { indexPage.showVideoListDetail(list); } break;
case "environment": { indexPage.showEnvironmentListDetail(list); } break;
case "lift": { } break;
}
}
function getDevInfoByTypeIdAndDevId(tid,did) {
var devDatas = webapi.DeviceListCache["deviceType_" + tid];
var devinfo = null;
$.each(devDatas, function (_index, _obj) {
if (_obj.id == did) {
devinfo = _obj;
}
});
return devinfo;
}
由于篇幅原因，这一课先介绍到这里
后面我将继续讲解用webgl 建立 3D隧道、3D桥梁、webgl实现三维隧道桥梁、three.js实现三维隧道桥梁、桥梁隧道三维应用炫酷效果等等
技术交流 1203193731@qq.com
交流微信：
如果你有什么要交流的心得 可邮件我
其它相关文章：
使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)
如何用webgl(three.js)搭建一个3D库房-第一课
如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课
使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课
如何用webgl(three.js)搭建不规则建筑模型，客流量热力图模拟
使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课（炫酷版一）
