設計 · 代碼梳理

``` //請勿修改此處命名參數 vsPluginComponentModule.factory('$vcPlugin_extwidgets_jifang_365', ['$vsPluginRegister', '$timeout', function ($vsPluginRegister, $timeout) { var factory = { //配置面板中顯示[數據]配置 showDataCategory: false, //配置面板中顯示[邊框]配置 showBorderCategory: true, //配置面板中顯示[基本]配置 showBasicCategory: true, //配置面板中顯示[浮動]配置 showFixedCategory: false, //配置面板中顯示[事件]配置 showEventCategory: false, //配置面板中顯示[標題]配置 showTitleCategory: true, //配置面板中顯示[預警]配置 showThresholdCategory: false, /* 控件的初始化 */ init: function(scope, element, component, $compile){ scope.element = element; scope.component = component; //默認屬性 // scope.component.sizeX = 4; // scope.component.sizeY = 23; //控件是否開啟頁面過濾（例如下拉框、多選框等過濾器需要設置為true） component.config.pageFilter = true; //控件的圖形維度數量 scope.component.config.chartDimensionCount = 1; if (!component.config.is) { scope.component.config.sceneX = false; // 旋轉標志 scope.component.config.nav = false; //菜單顯示標志 scope.component.config.navTv = false; //菜單電視 scope.component.config.navJk1 = false; //菜單監控一區 scope.component.config.navJk2 = false; //菜單監控二區 scope.component.config.navMengjing = false; //菜單門禁 scope.component.config.navKongtiao = false; //菜單空調 scope.component.config.navLogo = false; //菜單公司logo // 默認場景標志 scope.component.config.sceneTv = true; //電視 scope.component.config.sceneJk1 = true; //監控一區 scope.component.config.sceneJk2 = true; //監控二區 scope.component.config.sceneMengjing = true; //門禁 scope.component.config.sceneKongtiao = true; //空調 scope.component.config.sceneLogo = true; //公司logo // 6個機柜 scope.component.config.sceneBox1 = true; scope.component.config.sceneBox2 = true; scope.component.config.sceneBox3 = true; scope.component.config.sceneBox4 = true; scope.component.config.sceneBox5 = true; scope.component.config.sceneBox6 = true; // 2個電柜 scope.component.config.sceneBox_dian1 = true; scope.component.config.sceneBox_dian2 = true; // 默認展示數據開關 scope.component.config.defShow = false; } }, /* * 構建數據描述，此方法中對控件的數據進行處理 */ buildDataDescription: function(dataDescription, scope, element, component, $compile){ //接收控件刷新數據的事件 scope.$on(event_refreshComponentData, function(target, param){ scope.queryComponentData(param, { onSuccess: function(){ refreshChartView(scope, element, component, $compile); } }); }); //接收維度聯動事件 scope.$on(event_chartDimensionValueChange, function(s, event){ //TODO: 處理圖形數據 }); /* * 頁面過濾回調方法，其它控件查詢數據時會調用該方法，獲取過濾的屬性 * 當component.config.pageFilter設置為true時被調用 */ scope.component.context.getPageFilter = function(){ var result = []; /* 例如: result.push({ column: "字段名", exp: "=", value: "值" }); */ return result; } }, /* * 構建圖形描述，此方法中定義控件的配置面板 */ buildChartDescription: function(scope, element, component, $compile){ scope.component = component; //控件需要的HTML var html = []; html.push('<div style="position:relative;">'); html.push("<div style='width:100%;height:100%;' id='jifang' onload='component.context.draw();'></div>"); html.push('<div style="position:absolute;top:0;left:-100px;width:100px;height:100%;background:#f7eee4;box-shadow: 2px 0 5px #c0c0c0;transition: all ease 0.6s;" class="menu">'); html.push('<div style="min-height: 30px;float: right;margin-right: 10px;padding-top: 23px;cursor: pointer;" class="close-menu">'); html.push('<img src="/cdn/img/jifang/close.png">'); html.push('</div>'); html.push('<ul class="three_send_item" style="margin-top: 50px;">'); html.push('<li ng-show="component.config.navTv" class="three_send_item_tv" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">電視</a></li>'); html.push('<li ng-show="component.config.navJk1" class="three_send_item_jk1" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">監控一區</a></li>'); html.push('<li ng-show="component.config.navJk2" class="three_send_item_jk2" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">監控二區</a></li>'); html.push('<li ng-show="component.config.navKongtiao" class="three_send_item_kongtiao" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">空調</a></li>'); html.push('<li ng-show="component.config.navMengjing" class="three_send_item_mengjing" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">門禁</a></li>'); html.push('<li ng-show="component.config.navLogo" class="three_send_item_logo" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">公司logo</a></li>'); html.push('<li ng-show="component.config.navBox1" class="three_send_item_box1" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">一號機柜</a></li>'); html.push('<li ng-show="component.config.navBox2" class="three_send_item_box2" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">二號機柜</a></li>'); html.push('<li ng-show="component.config.navBox3" class="three_send_item_box3" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">三號機柜</a></li>'); html.push('<li ng-show="component.config.navBox4" class="three_send_item_box4" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">四號機柜</a></li>'); html.push('<li ng-show="component.config.navBox5" class="three_send_item_box5" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">五號機柜</a></li>'); html.push('<li ng-show="component.config.navBox6" class="three_send_item_box6" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">六號機柜</a></li>'); html.push('<li ng-show="component.config.navBox_dian1" class="three_send_item_navBox_dian1" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">一號電機</a></li>'); html.push('<li ng-show="component.config.navBox_dian2" class="three_send_item_navBox_dian2" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">二號電機</a></li>'); html.push('</ul>'); html.push('</div>'); html.push('<div ng-show="component.config.nav" style="position:absolute;top:0px;left:0px;background:#fff;width: 25px;height: 25px;border-radius:2px;cursor: pointer;transition: all ease 0.6s;" class="b-wrap">'); html.push('<div class="mhead">'); html.push('<img style="margin-top: 2px;margin-left: 2px;" class="menu-ham" src="/cdn/img/jifang/hamburger.png">'); html.push('</div>'); html.push('</div>'); var el = $compile(html.join(""))( scope ); element.append(el); /* * 構建[設置]配置面板 */ buildSettingDescription(scope, element, component, $compile); /* * TODO: 可構建更多配置面板 * 例如：buildOtherDescription(scope, element, component, $compile); */ // 全局變量 scope.component.context.domWidth = $('#'+scope.component.id+' #compContent').width(); scope.component.context.domHeight = $('#'+scope.component.id+' #compContent').height(); scope.component.context.matArrayA=[];//外墻 scope.component.context.matArrayB = [];//內墻 scope.component.context.matArrayC = []; scope.component.context.dummy= new THREE.Object3D();//門基類 scope.component.context.plant = new THREE.Object3D(); //花基類1 scope.component.context.plant1 = new THREE.Object3D(); //花基類2 scope.component.context.dbclick = 0; // 渲染器 scope.component.context.initRender = function() { scope.component.context.renderer = new THREE.WebGLRenderer({antialias: true}); scope.component.context.renderer.setPixelRatio(window.devicePixelRatio); // scope.component.context.renderer.setSize(scope.component.context.domWidth, scope.component.context.domHeight); // scope.component.context.renderer.setClearColor(0xf0f0f0); // scope.component.context.renderer.shadowMap.enabled = false; // 獲取元素 var dom = document.getElementById('jifang') console.log(dom); //插入到dom $('#'+scope.component.id+' #jifang')[0].appendChild(scope.component.context.renderer.domElement); } // 相機 scope.component.context.initCamera = function() { //相機設置 scope.component.context.camera = new THREE.PerspectiveCamera(75, scope.component.context.domWidth / scope.component.context.domHeight, 0.1, 20000); // 相機位置 scope.component.context.camera.position.set(0,500,1000); } // 場景 scope.component.context.initScene = function() { scope.component.context.scene = new THREE.Scene(); } //天空盒1 scope.component.context.initSceneBox1 = function() { //路徑 scope.component.context.path = "http://ae01.alicdn.com/kf/"; //設置路徑 var format = '.jpg'; //設定格式 scope.component.context.urls = [ scope.component.context.path + 'HTB1GBRUhpooBKNjSZFPq6xa2XXa5'+ format, scope.component.context.path + 'HTB1nqDXm98YBeNkSnb4q6yevFXa0'+ format, scope.component.context.path + 'HTB13tL9vkOWBuNjSsppq6xPgpXay' + format, scope.component.context.path + 'HTB1VELXvgaTBuNjSszfq6xgfpXac' + format, scope.component.context.path + 'HTB1PLbTvf9TBuNjy1zbq6xpepXao' + format, scope.component.context.path + 'HTB1bxWzmZuYBuNkSmRyq6AA3pXa8' + format ]; scope.component.context.textureCube = new THREE.CubeTextureLoader().load( scope.component.context.urls ); scope.component.context.scene.background = scope.component.context.textureCube; //作為背景貼圖 } // 燈光 scope.component.context.initLight = function() { scope.component.context.directionalLight = new THREE.DirectionalLight( 0xffffff,1 ); scope.component.context.directionalLight.position.set( 0, 100, 0).normalize(); scope.component.context.scene.add( scope.component.context.directionalLight ); //A end scope.component.context.ambient = new THREE.AmbientLight( 0xffffff,1 ); scope.component.context.ambient.position.set(0,0,0); scope.component.context.scene.add( scope.component.context.ambient ); } //創建地板 scope.component.context.createFloor = function(){ scope.component.context.footerloader = new THREE.TextureLoader(); scope.component.context.footerloader.load("/cdn/img/jifang/floor.jpg",function(texture){ texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 10, 10 ); scope.component.context.floorGeometry = new THREE.BoxGeometry(2000, 2000, 10); scope.component.context.floorMaterial = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } ); scope.component.context.floor = new THREE.Mesh(scope.component.context.floorGeometry, scope.component.context.floorMaterial); scope.component.context.floor.position.y = -0.5; scope.component.context.floor.rotation.x = Math.PI / 2; scope.component.context.scene.add(scope.component.context.floor); }); //茶色：0x58ACFA 透明玻璃色：0XECF1F3 scope.component.context.glass_material=new THREE.MeshBasicMaterial( { color: 0XECF1F3}); scope.component.context.glass_material.opacity=0.4; scope.component.context.glass_material.transparent=true; scope.component.context.createCubeWall(20, 200, 2000,0,scope.component.context.matArrayB,-801,100,0); scope.component.context.createCubeWall(20, 200, 2000,0,scope.component.context.matArrayB,801,100,0); } //創建墻 scope.component.context.createCubeWall = function(width, height, depth,angle,material,x,y,z){ var cubeGeometry = new THREE.BoxGeometry(width, height, depth ); var cube = new THREE.Mesh( cubeGeometry, material ); cube.position.x = x; cube.position.y = y; cube.position.z = z; cube.rotation.y += angle*Math.PI; //y軸旋轉 // console.log(cube) scope.component.context.scene.add(cube); } scope.component.context.createCubeMen = function(width, height, depth,angle,material,x,y,z,name){ var cubeGeometry = new THREE.BoxGeometry(width, height, depth ); var cube = new THREE.Mesh( cubeGeometry, material ); cube.position.x = x; cube.position.y = y; cube.position.z = z; cube.rotation.y += angle*Math.PI; //y軸旋轉 // console.log(cube) cube.name = name scope.component.context.scene.add(cube); } //創建上下頂部 scope.component.context.createCubeWallTop = function(width, height, depth,angle,material,x,y,z){ var cubeGeometryTop = new THREE.BoxGeometry(width, height, depth ); var cubeTop = new THREE.Mesh( cubeGeometryTop, material ); cubeTop.position.x = x; cubeTop.position.y = y; cubeTop.position.z = z; cubeTop.rotation.z += angle*Math.PI; //z軸旋轉 scope.component.context.scene.add(cubeTop); } //創建墻體 scope.component.context.returnWallObject = function(width, height, depth,angle,material,x,y,z){ var cubeGeometry = new THREE.BoxGeometry(width, height, depth); var cube = new THREE.Mesh( cubeGeometry, material ); cube.position.x = x; cube.position.y = y; cube.position.z = z; cube.rotation.y += angle*Math.PI; return cube; } //創建墻紋理 scope.component.context.createWallMaterail = function(){ var leafTexturetest = new THREE.TextureLoader().load('/cdn/img/jifang/rack_door_back.jpg'); var leafTexturemen = new THREE.TextureLoader().load('/cdn/img/jifang/rack_front_door.jpg'); scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //前 0xafc0ca :灰色 scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //后 scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //上 0xd6e4ec：偏白色 scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //下 scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //左 0xafc0ca :灰色 scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //右 scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //前 0xafc0ca :灰色 scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0x9cb2d1})); //后 0x9cb2d1：淡紫 scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //上 0xd6e4ec：偏白色 scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //下 scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //左 0xafc0ca :灰色 scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //右 scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0x999999,map:leafTexturemen})); scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0xafc0ca,map:leafTexturetest})); scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0x999999,map:leafTexturetest})); scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0x999999,map:leafTexturetest})); scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0xafc0ca,map:leafTexturetest})); scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0xafc0ca,map:leafTexturetest})); } //墻體瓦門 scope.component.context.createResultBsp = function(bsp,less_bsp,mat){ switch(mat) { case 1: var material = new THREE.MeshPhongMaterial({color:0x9cb2d1,specular:0x9cb2d1,shininess:30,transparent:true,opacity:1}); break; case 2: var material = new THREE.MeshPhongMaterial({color:0xafc0ca,specular:0xafc0ca,shininess:30,transparent:true,opacity:1}); break; case 3: var material = new THREE.MeshPhongMaterial({color:0xafc0ca,specular:0xafc0ca,shininess:30,transparent:true,opacity:1}); break; case 4: var material = new THREE.MeshPhongMaterial({color:0xafc0ca,specular:0xafc0ca,shininess:30,transparent:true,opacity:1}); break; default: } var sphere1BSP = new ThreeBSP(bsp); var cube2BSP = new ThreeBSP(less_bsp);//0x9cb2d1 淡紫,0xC3C3C3 白灰 , 0xafc0ca灰 var resultBSP = sphere1BSP.subtract(cube2BSP); var result = resultBSP.toMesh(material); result.material.flatshading = THREE.FlatShading; result.geometry.computeFaceNormals(); //重新計算幾何體側面法向量 result.geometry.computeVertexNormals(); result.material.needsUpdate = true; //更新紋理 result.geometry.buffersNeedUpdate = true; result.geometry.uvsNeedUpdate = true; scope.component.context.scene.add(result); } //房間布局 scope.component.context.createLayout = function(){ // 墻面1 立方體比較長的面左一 var wallleft = scope.component.context.returnWallObject(10, 200, 900,0,scope.component.context.matArrayB,-651,100,0); // 墻面2 立方體比較長的面右一 scope.component.context.createCubeWall(10, 200, 900,1,scope.component.context.matArrayB,651,100,0); // 墻面3 門對面的墻立方體比較短的面 scope.component.context.createCubeWall(10, 200, 1310,1.5,scope.component.context.matArrayB,0,100,-451); // 墻面4 帶門的面 var wall = scope.component.context.returnWallObject(1310, 200,10,0,scope.component.context.matArrayB,0,100,455); // 門框 var door_cube = scope.component.context.returnWallObject(100, 180,10,0,scope.component.context.matArrayB,0,90,455); scope.component.context.createResultBsp(wall,door_cube,1); //門 var loader=new THREE.TextureLoader(); loader.load("/cdn/img/jifang/door_right.png",function(texture){ var doorgeometry = new THREE.BoxGeometry(100, 180, 2); var doormaterial = new THREE.MeshBasicMaterial({map:texture,color:0xffffff}); doormaterial.opacity=1.0; doormaterial.transparent=true; door = new THREE.Mesh( doorgeometry,doormaterial); door.position.set(-50,0,0); var door1 = door.clone(); door1.position.set(50,0,0); door1.visible=false; scope.component.context.dummy.add(door); scope.component.context.dummy.add(door1); scope.component.context.dummy.position.set(50,90,451) scope.component.context.scene.add(scope.component.context.dummy); }); // 門框 var door_cube1 = scope.component.context.returnWallObject(500, 120,900,0.5,scope.component.context.matArrayB,-651,100,0); scope.component.context.createResultBsp(wallleft,door_cube1,3); //窗子 var glass_material=new THREE.MeshBasicMaterial( { color: 0x58ACFA}); glass_material.opacity=0.3; glass_material.transparent=true; scope.component.context.createCubeWall(0, 120,520,0,glass_material,-651,100,10); } //場景物體函數 scope.component.context.initModel = function() { var helper = new THREE.AxesHelper(50); scope.component.context.scene.add(helper); // 創建空調 var cubeGeometry = new THREE.BoxGeometry(25, 150, 60); var texture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/aircondition.jpg'); var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, map: texture }); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.name = "cube" //設置位置 cube.position.x = -600; cube.position.y = 80; cube.position.z = -400; cube.rotation.y = -0.25 * Math.PI; //添加空調到場景 scope.component.context.scene.add(cube); // 電視 var tvGeometry = new THREE.BoxGeometry(250, 150, 10); var tvtexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/tv.jpg'); var tvcubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, map: tvtexture }); var tv = new THREE.Mesh(tvGeometry, tvcubeMaterial); tv.name = "tv" console.log(tv) tv.position.x = 650; tv.position.y = 100; tv.position.z = 10; tv.rotation.y = -0.5 * Math.PI; //添加到場景 scope.component.context.scene.add(tv); // 門禁 var AccessGeometry = new THREE.BoxGeometry(30, 40, 5); var Accesstexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/doorControl.jpg'); var AccesscubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, map: Accesstexture }); var access = new THREE.Mesh(AccessGeometry, AccesscubeMaterial); access.name = 'access'; access.position.x = -90; access.position.y = 130; access.position.z = 460; scope.component.context.scene.add(access); // logo var logoGeometry = new THREE.BoxGeometry(200, 50, 0); var logotexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/logo.png'); var logocubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, map: logotexture }); logocubeMaterial.opacity=1.0; logocubeMaterial.transparent=true; var logo = new THREE.Mesh(logoGeometry, logocubeMaterial); logo.name = "logo" logo.position.x = -350; logo.position.y = 100; logo.position.z = 460; scope.component.context.scene.add(logo); // 監控1 var jkGeometry = new THREE.PlaneGeometry(50, 40, 0); var jktexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/jk.png'); var jkcubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, map: jktexture }); jkcubeMaterial.opacity=1.0; jkcubeMaterial.transparent=true; var jk = new THREE.Mesh(jkGeometry, jkcubeMaterial); jk.name = "jiankongone" jk.position.x = 550; jk.position.y = 170; jk.position.z = -440; scope.component.context.scene.add(jk); // 監控2 var jkGeometry2 = new THREE.PlaneGeometry(50, 40, 0); var jktexture2 = THREE.ImageUtils.loadTexture('/cdn/img/jifang/jk.png'); var jkcubeMaterial2 = new THREE.MeshLambertMaterial({ color: 0xffffff, map: jktexture2 }); jkcubeMaterial2.opacity=1.0; jkcubeMaterial2.transparent=true; var jk2 = new THREE.Mesh(jkGeometry2, jkcubeMaterial2); jk2.name = "jiankongtow" jk2.position.x = -550; jk2.position.y = 170; jk2.position.z = -440; scope.component.context.scene.add(jk2); // 機房公告牌 var messageGeometry = new THREE.BoxGeometry(100, 150, 0); var messagetexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/message.jpg'); var messagecubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, map: messagetexture }); var message = new THREE.Mesh(messageGeometry, messagecubeMaterial); message.name = "message" message.position.x = -50; message.position.y = 100; message.position.z = -445; scope.component.context.scene.add(message); // 消防展示欄 var extinguisherGeometry = new THREE.BoxGeometry(200, 100, 0); var extinguishertexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/fire_extinguisher_side.jpg'); var extinguishercubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, map: extinguishertexture }); var extinguisher = new THREE.Mesh(extinguisherGeometry, extinguishercubeMaterial); extinguisher.name = "extinguisher" extinguisher.position.x = 350; extinguisher.position.y = 130; extinguisher.position.z = 445; scope.component.context.scene.add(extinguisher); //警告 var warninggeometry = new THREE.CylinderBufferGeometry( 20, 0, 60, 60 ); var warninggeometryextinguishertexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/down.png'); var warningmaterial = new THREE.MeshLambertMaterial({ // color: 0xffff00, map: warninggeometryextinguishertexture }); var warning = new THREE.Mesh( warninggeometry, warningmaterial ); warning.position.x = -120; warning.position.y = 170; warning.position.z = 20; warning.name = "warning" warning.visible = false; scope.component.context.scene.add( warning ); // 花盆1 var geometry = new THREE.CylinderBufferGeometry( 20, 15, 60, 20 ); var geometryextinguishertexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/bbb.png'); var material = new THREE.MeshLambertMaterial({ // color: 0xffff00, map: geometryextinguishertexture }); var cylinder = new THREE.Mesh( geometry, material ); cylinder.position.x = 0; cylinder.position.y = 0.2; cylinder.position.z = 0; scope.component.context.plant.add( cylinder ); var leafTexture = new THREE.TextureLoader().load('/cdn/img/jifang/plant.png'); var leafMaterial = new THREE.MeshBasicMaterial({map:leafTexture,side:THREE.DoubleSide,transparent:true}); var geom = new THREE.PlaneGeometry(50, 60); for(var i=0;i<4;i++){ var leaf = new THREE.Mesh( geom, leafMaterial ); leaf.position.y = 60; leaf.rotation.y = -Math.PI/(i+1); scope.component.context.plant.add(leaf); } scope.component.context.plant.position.set(580,30,-250) scope.component.context.scene.add(scope.component.context.plant); // 花盆2 var geometry1 = new THREE.CylinderBufferGeometry( 20, 15, 60, 20 ); var geometryextinguishertexture1 = THREE.ImageUtils.loadTexture('/cdn/img/jifang/bbb.png'); var material1 = new THREE.MeshLambertMaterial({ // color: 0xffff00, map: geometryextinguishertexture1 }); var cylinder1 = new THREE.Mesh( geometry1, material1 ); cylinder1.position.x = 0; cylinder1.position.y = 0.2; cylinder1.position.z = 0; scope.component.context.plant1.add( cylinder1 ); var leafTexture1 = new THREE.TextureLoader().load('/cdn/img/jifang/plant.png'); var leafMaterial1 = new THREE.MeshBasicMaterial({map:leafTexture1,side:THREE.DoubleSide,transparent:true}); var geom1 = new THREE.PlaneGeometry(50, 60); for(var i=0;i<4;i++){ var leaf1 = new THREE.Mesh( geom1, leafMaterial1 ); leaf1.position.y = 60; leaf1.rotation.y = -Math.PI/(i+1); scope.component.context.plant1.add(leaf1); } scope.component.context.plant1.position.set(580,30,250) scope.component.context.scene.add(scope.component.context.plant1); // 機柜盒子1 var box1 = new THREE.BoxBufferGeometry( 70, 150, 70 ); //紋理 var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg"); var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var materialArr=[ //貼圖 new THREE.MeshPhongMaterial({map:boxtexture1}), new THREE.MeshPhongMaterial({map:boxtexture2}), new THREE.MeshPhongMaterial({map:boxtexture3}), new THREE.MeshPhongMaterial({map:boxtexture4}), new THREE.MeshPhongMaterial({map:boxtexture5}), new THREE.MeshPhongMaterial({map:boxtexture6}) ]; //6個面不一樣的 var facematerial=new THREE.MeshFaceMaterial(materialArr); var box1_1 = new THREE.Mesh(box1,facematerial);// box1_1.position.set(-200,80,0) box1_1.name = 'box1' scope.component.context.scene.add(box1_1); // 機柜盒子2 var box2 = new THREE.BoxBufferGeometry( 70, 150, 70 ); //紋理 var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg"); var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var materialArr=[ //貼圖 new THREE.MeshPhongMaterial({map:boxtexture1}), new THREE.MeshPhongMaterial({map:boxtexture2}), new THREE.MeshPhongMaterial({map:boxtexture3}), new THREE.MeshPhongMaterial({map:boxtexture4}), new THREE.MeshPhongMaterial({map:boxtexture5}), new THREE.MeshPhongMaterial({map:boxtexture6}) ]; //6個面不一樣的 var facematerial=new THREE.MeshFaceMaterial(materialArr); var box2_1 = new THREE.Mesh(box2,facematerial);// box2_1.position.set(-200,80,200) box2_1.name = 'box2' scope.component.context.scene.add(box2_1); // 機柜盒子3 var box3 = new THREE.BoxBufferGeometry( 70, 150, 70 ); //紋理 var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg"); var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var materialArr=[ //貼圖 new THREE.MeshPhongMaterial({map:boxtexture1}), new THREE.MeshPhongMaterial({map:boxtexture2}), new THREE.MeshPhongMaterial({map:boxtexture3}), new THREE.MeshPhongMaterial({map:boxtexture4}), new THREE.MeshPhongMaterial({map:boxtexture5}), new THREE.MeshPhongMaterial({map:boxtexture6}) ]; //6個面不一樣的 var facematerial=new THREE.MeshFaceMaterial(materialArr); var box3_1 = new THREE.Mesh(box3,facematerial);// box3_1.position.set(-200,80,-200) box3_1.name = 'box3' scope.component.context.scene.add(box3_1); // 機柜盒子4 var box4 = new THREE.BoxBufferGeometry( 70, 150, 70 ); //紋理 var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg"); var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var materialArr=[ //貼圖 new THREE.MeshPhongMaterial({map:boxtexture1}), new THREE.MeshPhongMaterial({map:boxtexture2}), new THREE.MeshPhongMaterial({map:boxtexture3}), new THREE.MeshPhongMaterial({map:boxtexture4}), new THREE.MeshPhongMaterial({map:boxtexture5}), new THREE.MeshPhongMaterial({map:boxtexture6}) ]; //6個面不一樣的 var facematerial=new THREE.MeshFaceMaterial(materialArr); var box4_1 = new THREE.Mesh(box4,facematerial);// box4_1.position.set(-400,80,-200) box4_1.name = 'box4' scope.component.context.scene.add(box4_1); // 機柜盒子5 var box5 = new THREE.BoxBufferGeometry( 70, 150, 70 ); //紋理 var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg"); var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var materialArr=[ //貼圖 new THREE.MeshPhongMaterial({map:boxtexture1}), new THREE.MeshPhongMaterial({map:boxtexture2}), new THREE.MeshPhongMaterial({map:boxtexture3}), new THREE.MeshPhongMaterial({map:boxtexture4}), new THREE.MeshPhongMaterial({map:boxtexture5}), new THREE.MeshPhongMaterial({map:boxtexture6}) ]; //6個面不一樣的 var facematerial=new THREE.MeshFaceMaterial(materialArr); var box5_1 = new THREE.Mesh(box5,facematerial);// box5_1.position.set(-400,80,0) box5_1.name = 'box5' scope.component.context.scene.add(box5_1); // 機柜盒子6 var box6 = new THREE.BoxBufferGeometry( 70, 150, 70 ); //紋理 var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg"); var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var materialArr=[ //貼圖 new THREE.MeshPhongMaterial({map:boxtexture1}), new THREE.MeshPhongMaterial({map:boxtexture2}), new THREE.MeshPhongMaterial({map:boxtexture3}), new THREE.MeshPhongMaterial({map:boxtexture4}), new THREE.MeshPhongMaterial({map:boxtexture5}), new THREE.MeshPhongMaterial({map:boxtexture6}) ]; //6個面不一樣的 var facematerial=new THREE.MeshFaceMaterial(materialArr); var box6_1 = new THREE.Mesh(box6,facematerial);// box6_1.position.set(-400,80,200) box6_1.name = 'box6' scope.component.context.scene.add(box6_1); // 電箱1 var box_dian1 = new THREE.BoxBufferGeometry( 300, 150, 50 ); //紋理 var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg"); var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var materialArr=[ //貼圖 new THREE.MeshPhongMaterial({map:boxtexture1}), new THREE.MeshPhongMaterial({map:boxtexture2}), new THREE.MeshPhongMaterial({map:boxtexture3}), new THREE.MeshPhongMaterial({map:boxtexture4}), new THREE.MeshPhongMaterial({map:boxtexture5}), new THREE.MeshPhongMaterial({map:boxtexture6}) ]; //6個面不一樣的 var facematerial=new THREE.MeshFaceMaterial(materialArr); var box_dian1_1 = new THREE.Mesh(box_dian1,facematerial);// box_dian1_1.position.set(230,80,-320) box_dian1_1.name = 'box_dian1' scope.component.context.scene.add(box_dian1_1); // 電箱2 var box_dian2 = new THREE.BoxBufferGeometry( 300, 150, 50 ); //紋理 var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg"); var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg"); var materialArr=[ //貼圖 new THREE.MeshPhongMaterial({map:boxtexture1}), new THREE.MeshPhongMaterial({map:boxtexture2}), new THREE.MeshPhongMaterial({map:boxtexture3}), new THREE.MeshPhongMaterial({map:boxtexture4}), new THREE.MeshPhongMaterial({map:boxtexture5}), new THREE.MeshPhongMaterial({map:boxtexture6}) ]; //6個面不一樣的 var facematerial=new THREE.MeshFaceMaterial(materialArr); var box_dian2_1 = new THREE.Mesh(box_dian2,facematerial);// box_dian2_1.position.set(230,80,-180) box_dian2_1.name = 'box_dian2' scope.component.context.scene.add(box_dian2_1); } //插入dmo scope.component.context.initStats = function() { scope.component.context.stats = new Stats(); $('#'+scope.component.id+' #jifang')[0].appendChild(scope.component.context.stats.dom); } // 鼠標控制 scope.component.context.initControls = function() { scope.component.context.controls = new THREE.OrbitControls(scope.component.context.camera, scope.component.context.renderer.domElement); scope.component.context.controls.enableDamping = true; scope.component.context.controls.enableZoom = true; scope.component.context.controls.autoRotate = false; scope.component.context.controls.autoRotateSpeed = 0.5; scope.component.context.controls.minDistance = 1; scope.component.context.controls.maxDistance = 2000; scope.component.context.controls.enablePan = true; } scope.component.context.render = function() { //更新 scope.component.context.controls.update(); } //窗口大小適應 scope.component.context.onWindowResize = function() { scope.component.context.camera.aspect = scope.component.context.domWidth / scope.component.context.domHeight; scope.component.context.camera.updateProjectionMatrix(); scope.component.context.renderer.setSize(scope.component.context.domWidth, scope.component.context.domHeight); } scope.component.context.animate = function() { //渲染 scope.component.context.render(); //更新 scope.component.context.stats.update(); scope.component.context.renderer.render(scope.component.context.scene, scope.component.context.camera); // scene.rotation.x += 0.01; // console.log(scope.component.config.sceneX) if(scope.component.config.sceneX){ scope.component.context.scene.rotation.y += 0.01; } requestAnimationFrame(scope.component.context.animate); } //初始化對象 scope.component.context.initObject = function(){ scope.component.context.createWallMaterail(); //墻體紋理 scope.component.context.createFloor(); //地板 scope.component.context.createLayout(); //房間布局 } scope.component.context.draw = function() { //判斷支持webgl if (!Detector.webgl) Detector.addGetWebGLMessage(); scope.component.context.initRender(); scope.component.context.initScene(); scope.component.context.initCamera(); scope.component.context.initLight(); scope.component.context.initObject(); scope.component.context.initSceneBox1(); scope.component.context.initModel(); scope.component.context.initControls(); scope.component.context.initStats(); scope.component.context.animate(); scope.component.context.onWindowResize(); } scope.component.context.draw(); console.log(scope) $("#"+scope.component.id+" .menu-ham").click(function () { $("#"+scope.component.id+" .menu").animate({left: '0px'}, 100); $("#"+scope.component.id+" .b-wrap").animate({left: '100px'}, 100); }); $("#"+scope.component.id+" .close-menu").click(function () { $("#"+scope.component.id+" .menu").animate({left: '-100px'}, 100); $("#"+scope.component.id+" .b-wrap").animate({left: '0px'}, 100); }); // 事件系列 // 默認展示數據 if(scope.component.config.defShow){ //多媒體 var index = layer.open({ type: 2, content: scope.component.config.defUrl, area: ['630px', '360px'], maxmin: true }); layer.full(index); } // 電視 $("#"+scope.component.id+" .three_send_item .three_send_item_tv").click(function () { if(scope.component.config.tvUrl != undefined || scope.component.config.tvUrl != null ||scope.component.config.tvUrl){ //多媒體 layer.open({ type: 2, title: false, area: ['630px', '360px'], shade: 0.8, closeBtn: 0, shadeClose: true, content: scope.component.config.tvUrl }); } }); //監控1 $("#"+scope.component.id+" .three_send_item .three_send_item_jk1").click(function () { if(scope.component.config.jk1Url != undefined ||scope.component.config.jk1Url != null ||scope.component.config.jk1Url ){ //多媒體 layer.open({ type: 2, title: false, area: ['630px', '360px'], shade: 0.8, closeBtn: 0, shadeClose: true, content: '/js/definition.html?url='+scope.component.config.jk1Url }); } }); // 監控2 $("#"+scope.component.id+" .three_send_item .three_send_item_jk2").click(function () { console.log(scope.component.config.jk2Url) if(scope.component.config.jk2Url != undefined || scope.component.config.jk2Url != null || scope.component.config.jk2Url ){ //多媒體 layer.open({ type: 2, title: false, area: ['630px', '360px'], shade: 0.8, closeBtn: 0, shadeClose: true, content: '/js/definition.html?url='+scope.component.config.jk2Url }); } }); // logo $("#"+scope.component.id+" .three_send_item .three_send_item_logo").click(function () { console.log(scope.component.config.logoUrl) if(scope.component.config.logoUrl != undefined || scope.component.config.logoUrl != null || scope.component.config.logoUrl ){ var index = layer.open({ type: 2, content: scope.component.config.logoUrl, area: ['630px', '360px'], maxmin: true }); layer.full(index); } }); //門禁 $("#"+scope.component.id+" .three_send_item .three_send_item_mengjing").click(function () { console.log(scope.component.config.mengjingUrl) if(scope.component.config.mengjingUrl != undefined || scope.component.config.mengjingUrl != null || scope.component.config.mengjingUrl ){ var index = layer.open({ type: 2, content: scope.component.config.mengjingUrl, area: ['630px', '360px'], maxmin: true }); layer.full(index); } }); //空調 $("#"+scope.component.id+" .three_send_item .three_send_item_kongtiao").click(function () { console.log(scope.component.config.kongtiaoUrl) if(scope.component.config.kongtiaoUrl != undefined || scope.component.config.kongtiaoUrl != null || scope.component.config.kongtiaoUrl ){ var index = layer.open({ type: 2, content: scope.component.config.kongtiaoUrl, area: ['630px', '360px'], maxmin: true }); layer.full(index); } }); //一號機柜 $("#"+scope.component.id+" .three_send_item .three_send_item_box1").click(function () { console.log(scope.component.config.box1_url) if(scope.component.config.box1_url != undefined || scope.component.config.box1_url != null || scope.component.config.box1_url ){ var index = layer.open({ type: 2, content: scope.component.config.box1_url, area: ['630px', '360px'], maxmin: true }); layer.full(index); } }); //二號機柜 $("#"+scope.component.id+" .three_send_item .three_send_item_box2").click(function () { console.log(scope.component.config.box2_url) if(scope.component.config.box2_url != undefined || scope.component.config.box2_url != null || scope.component.config.box2_url ){ var index = layer.open({ type: 2, content: scope.component.config.box2_url, area: ['630px', '360px'], maxmin: true }); layer.full(index); } }); //三號機柜 $("#"+scope.component.id+" .three_send_item .three_send_item_box3").click(function () { console.log(scope.component.config.box3_url) if(scope.component.config.box3_url != undefined || scope.component.config.box3_url != null || scope.component.config.box3_url ){ var index = layer.open({ type: 2, content: scope.component.config.box3_url, area: ['630px', '360px'], maxmin: true }); layer.full(index); } }); //四號機柜 $("#"+scope.component.id+" .three_send_item .three_send_item_box4").click(function () { console.log(scope.component.config.box4_url) if(scope.component.config.box4_url != undefined || scope.component.config.box4_url != null || scope.component.config.box4_url ){ var index = layer.open({ type: 2, content: scope.component.config.box4_url, area: ['630px', '360px'], maxmin: true }); layer.full(index); } }); //五號機柜 $("#"+scope.component.id+" .three_send_item .three_send_item_box5").click(function () { console.log(scope.component.config.box5_url) if(scope.component.config.box5_url != undefined || scope.component.config.box5_url != null || scope.component.config.box5_url ){ var index = layer.open({ type: 2, content: scope.component.config.box5_url, area: ['630px', '360px'], maxmin: true }); layer.full(index); } }); //六號機柜 $("#"+scope.component.id+" .three_send_item .three_send_item_box6").click(function () { console.log(scope.component.config.box6_url) if(scope.component.config.box6_url != undefined || scope.component.config.box6_url != null || scope.component.config.box6_url ){ var index = layer.open({ type: 2, content: scope.component.config.box6_url, area: ['630px', '360px'], maxmin: true }); layer.full(index); } }); //一號電機 $("#"+scope.component.id+" .three_send_item .three_send_item_navBox_dian1").click(function () { console.log(scope.component.config.box_dian1_url) if(scope.component.config.box_dian1_url != undefined || scope.component.config.box_dian1_url != null || scope.component.config.box_dian1_url ){ var index = layer.open({ type: 2, content: scope.component.config.box_dian1_url, area: ['630px', '360px'], maxmin: true }); layer.full(index); } }); //二號電機 $("#"+scope.component.id+" .three_send_item .three_send_item_navBox_dian2").click(function () { console.log(scope.component.config.box_dian2_url) if(scope.component.config.box_dian2_url != undefined || scope.component.config.box_dian2_url != null || scope.component.config.box_dian2_url ){ var index = layer.open({ type: 2, content: scope.component.config.box_dian2_url, area: ['630px', '360px'], maxmin: true }); layer.full(index); } }); //改變窗口大小做的一些事 scope.component.context.resize = function(){ $timeout(function(){ scope.component.context.onWindowResize() // console.log('234243') }, 100); } } }; var buildSettingDescription = function(scope, element, component, $compile){ //構建[設置]配置面板 var category = { name: "setting", title: "設置", groups: [] }; component.description.categories.push(category); category.groups.push({ name: "text", title: { text: '效果設置' }, elements: [{ title: "旋轉", type: "switch", bind: "sceneX", on: vsLang.on, off: vsLang.off }] }); category.groups.push({ name: "text", title: { text: '菜單設置' }, elements: [{ title: "主菜單", type: "switch", bind: "nav", on: vsLang.on, off: vsLang.off },{ title: "電視菜單", type: "switch", bind: "navTv", on: vsLang.on, off: vsLang.off },{ title: "監控一區菜單", type: "switch", bind: "navJk1", on: vsLang.on, off: vsLang.off },{ title: "監控二區菜單", type: "switch", bind: "navJk2", on: vsLang.on, off: vsLang.off },{ title: "門禁菜單", type: "switch", bind: "navMengjing", on: vsLang.on, off: vsLang.off },{ title: "空調菜單", type: "switch", bind: "navKongtiao", on: vsLang.on, off: vsLang.off },{ title: "Logo菜單", type: "switch", bind: "navLogo", on: vsLang.on, off: vsLang.off },{ title: "一號機柜", type: "switch", bind: "navBox1", on: vsLang.on, off: vsLang.off },{ title: "二號機柜", type: "switch", bind: "navBox2", on: vsLang.on, off: vsLang.off },{ title: "三號機柜", type: "switch", bind: "navBox3", on: vsLang.on, off: vsLang.off },{ title: "四號機柜", type: "switch", bind: "navBox4", on: vsLang.on, off: vsLang.off },{ title: "五號機柜", type: "switch", bind: "navBox5", on: vsLang.on, off: vsLang.off },{ title: "六號機柜", type: "switch", bind: "navBox6", on: vsLang.on, off: vsLang.off },{ title: "一號電機", type: "switch", bind: "navBox_dian1", on: vsLang.on, off: vsLang.off },{ title: "二電機", type: "switch", bind: "navBox_dian2", on: vsLang.on, off: vsLang.off }] }); category.groups.push({ name: "font", title: { text: "場景設置" }, elements: [{ title: "電視場景", type: "switch", bind: "sceneTv", on: vsLang.on, off: vsLang.off },{ title: "監控一區場景", type: "switch", bind: "sceneJk1", on: vsLang.on, off: vsLang.off },{ title: "監控二區場景", type: "switch", bind: "sceneJk2", on: vsLang.on, off: vsLang.off },{ title: "門禁場景", type: "switch", bind: "sceneMengjing", on: vsLang.on, off: vsLang.off },{ title: "空調場景", type: "switch", bind: "sceneKongtiao", on: vsLang.on, off: vsLang.off },{ title: "Logo場景", type: "switch", bind: "sceneLogo", on: vsLang.on, off: vsLang.off },{ title: "一號機柜", type: "switch", bind: "sceneBox1", on: vsLang.on, off: vsLang.off },{ title: "二號機柜", type: "switch", bind: "sceneBox2", on: vsLang.on, off: vsLang.off },{ title: "三號機柜", type: "switch", bind: "sceneBox3", on: vsLang.on, off: vsLang.off },{ title: "四號機柜", type: "switch", bind: "sceneBox4", on: vsLang.on, off: vsLang.off },{ title: "五號機柜", type: "switch", bind: "sceneBox5", on: vsLang.on, off: vsLang.off },{ title: "六號機柜", type: "switch", bind: "sceneBox6", on: vsLang.on, off: vsLang.off },{ title: "一號電機", type: "switch", bind: "sceneBox_dian1", on: vsLang.on, off: vsLang.off },{ title: "二號電機", type: "switch", bind: "sceneBox_dian2", on: vsLang.on, off: vsLang.off }] }); // 默認數據 category.groups.push({ title: { text: "默認場景表" }, elements: [{ title: "默認展示數據", type: "switch", bind: "defShow", on: vsLang.on, off: vsLang.off },{ title: "默認展示", type: "pageMultiSelect", bind: "defpages" }] }); category.groups.push({ title: { text: "場景報表" }, elements: [{ title: "電視", type: "text-area", bind: "tvUrl" },{ title: "監控一區", type: "text-area", bind: "jk1Url" },{ title: "監控二區", type: "text-area", bind: "jk2Url" },,{ title: "logo", type: "text-area", bind: "logoUrl" },{ title: "空調", type: "pageMultiSelect", bind: "pages1" },{ title: "門禁", type: "pageMultiSelect", bind: "pages2" },{ title: "一號機柜", type: "pageMultiSelect", bind: "box1url" },{ title: "二號機柜", type: "pageMultiSelect", bind: "box2url" },{ title: "三號機柜", type: "pageMultiSelect", bind: "box3url" },{ title: "四號機柜", type: "pageMultiSelect", bind: "box4url" },{ title: "五號機柜", type: "pageMultiSelect", bind: "box5url" },{ title: "六號機柜", type: "pageMultiSelect", bind: "box6url" },{ title: "一號電機", type: "pageMultiSelect", bind: "box_dian1url" },{ title: "二號電機", type: "pageMultiSelect", bind: "box_dian2url" }] }); // 監聽屬性系列 // 旋轉 scope.$watch('component.config.sceneX', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneX = newValue; } }); // 主菜單 scope.$watch('component.config.nav', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.nav = newValue; } }); //電視菜單 scope.$watch('component.config.navTv', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navTv = newValue; } }); //監控一區菜單 scope.$watch('component.config.navJk1', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navJk1 = newValue; } }); //監控二區菜單 scope.$watch('component.config.navJk2', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navJk2 = newValue; } }); //空調菜單 scope.$watch('component.config.navKongtiao', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navKongtiao = newValue; } }); //門禁菜單 scope.$watch('component.config.navMengjing', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navMengjing = newValue; } }); //logo菜單 scope.$watch('component.config.navLogo', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navLogo = newValue; } }); // 一號機柜菜單 scope.$watch('component.config.navBox1', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navBox1 = newValue; } }); // 二號機柜菜單 scope.$watch('component.config.navBox2', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navBox2 = newValue; } }); // 三號機柜菜單 scope.$watch('component.config.navBox3', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navBox3 = newValue; } }); // 四號機柜菜單 scope.$watch('component.config.navBox4', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navBox4 = newValue; } }); // 五號機柜菜單 scope.$watch('component.config.navBox5', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navBox5 = newValue; } }); // 六號機柜菜單 scope.$watch('component.config.navBox6', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navBox6 = newValue; } }); // 一號電機菜單 scope.$watch('component.config.navBox_dian1', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navBox_dian1 = newValue; } }); // 二號電機菜單 scope.$watch('component.config.navBox_dian2', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.navBox_dian2 = newValue; } }); // end //電視場景 scope.$watch('component.config.sceneTv', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneTv = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "tv"){ scope.component.context.scene.children[i].visible = option.sceneTv; } } } }); //監控一區場景 scope.$watch('component.config.sceneJk1', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneJk1 = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "jiankongone"){ scope.component.context.scene.children[i].visible = option.sceneJk1; } } } }); //監控二區場景 scope.$watch('component.config.sceneJk2', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneJk2 = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "jiankongtow"){ scope.component.context.scene.children[i].visible = option.sceneJk2; } } } }); //空調場景 scope.$watch('component.config.sceneKongtiao', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneKongtiao = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "cube"){ scope.component.context.scene.children[i].visible = option.sceneKongtiao; } } } }); //門禁場景 scope.$watch('component.config.sceneMengjing', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneMengjing = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "access"){ scope.component.context.scene.children[i].visible = option.sceneMengjing; } } } }); //logo場景 scope.$watch('component.config.sceneLogo', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneLogo = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "logo"){ scope.component.context.scene.children[i].visible = option.sceneLogo; } } } }); //一號機柜場景 scope.$watch('component.config.sceneBox1', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneBox1 = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "box1"){ scope.component.context.scene.children[i].visible = option.sceneBox1; } } } }); //二號機柜場景 scope.$watch('component.config.sceneBox2', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneBox2 = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "box2"){ scope.component.context.scene.children[i].visible = option.sceneBox2; } } } }); //三號機柜場景 scope.$watch('component.config.sceneBox3', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneBox3 = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "box3"){ scope.component.context.scene.children[i].visible = option.sceneBox3; } } } }); //四號機柜場景 scope.$watch('component.config.sceneBox4', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneBox4 = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "box4"){ scope.component.context.scene.children[i].visible = option.sceneBox4; } } } }); //五號機柜場景 scope.$watch('component.config.sceneBox5', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneBox5 = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "box5"){ scope.component.context.scene.children[i].visible = option.sceneBox5; } } } }); //六號機柜場景 scope.$watch('component.config.sceneBox6', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneBox6 = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "box6"){ scope.component.context.scene.children[i].visible = option.sceneBox6; } } } }); // 一號電機 scope.$watch('component.config.sceneBox_dian1', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneBox_dian1 = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "box_dian1"){ scope.component.context.scene.children[i].visible = option.sceneBox_dian1; } } } }); // 二號電機 scope.$watch('component.config.sceneBox_dian2', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.sceneBox_dian2 = newValue; for(var i = 0;i<scope.component.context.scene.children.length;i++){ if(scope.component.context.scene.children[i].name == "box_dian2"){ scope.component.context.scene.children[i].visible = option.sceneBox_dian2; } } } }); // end // 默認展示數據 scope.$watch('component.config.defShow', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.defShow = newValue; } }); scope.$watch('component.config.defpages', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ // console.log('/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&') var option = component.config; option.is = true; option.defUrl = '/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&' } }); // end //電視url scope.$watch('component.config.tvUrl', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.tvUrl = newValue; } }); //監控一區url scope.$watch('component.config.jk1Url', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.jk1Url = newValue; } }); //監控二區url scope.$watch('component.config.jk2Url', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.jk2Url = newValue; } }); //logourl scope.$watch('component.config.logoUrl', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ var option = component.config; option.is = true; option.logoUrl = newValue; } }); //空調報表 scope.$watch('component.config.pages1', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ // console.log('/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&') var option = component.config; option.is = true; option.kongtiaoUrl = '/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&' } }); //門禁報表 scope.$watch('component.config.pages2', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ // console.log('/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&') var option = component.config; option.is = true; option.mengjingUrl = '/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&' } }); //一號機柜 scope.$watch('component.config.box1url', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ // console.log('/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&') var option = component.config; option.is = true; option.box1_url = '/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&' } }); //二號機柜 scope.$watch('component.config.box2url', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ // console.log('/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&') var option = component.config; option.is = true; option.box2_url = '/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&' } }); //三號機柜 scope.$watch('component.config.box3url', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ // console.log('/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&') var option = component.config; option.is = true; option.box3_url = '/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&' } }); //四號機柜 scope.$watch('component.config.box4url', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ // console.log('/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&') var option = component.config; option.is = true; option.box4_url = '/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&' } }); //五號機柜 scope.$watch('component.config.box5url', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ // console.log('/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&') var option = component.config; option.is = true; option.box5_url = '/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&' } }); //六號機柜 scope.$watch('component.config.box6url', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ // console.log('/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&') var option = component.config; option.is = true; option.box6_url = '/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&' } }); // 一號電機 scope.$watch('component.config.box_dian1url', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ // console.log('/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&') var option = component.config; option.is = true; option.box_dian1_url = '/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&' } }); // 二號電機 scope.$watch('component.config.box_dian2url', function(newValue, oldValue){ if(newValue != null && (oldValue == null || oldValue !== newValue)){ // console.log('/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&') var option = component.config; option.is = true; option.box_dian2_url = '/view/report.do?reportId='+reportId+'&page='+newValue[0].key+'&' } }); } //刷新控件渲染 var refreshChartView = function(scope, element, component, $compile){ //配置的維度 var dimensions = component.config.datasourceConfig.dimensions; //配置的度量 var measures = component.config.datasourceConfig.measures; //服務器端返回的查詢數據 var data = component.context.data; //TODO: 使用新數據對控件進行渲染 }; //請勿修改此處命名參數 $vsPluginRegister.register("extwidgets", "jifang_365", factory); }]); ```