优化模型加载处理

src/pages/components/Fac.vue

@@ -258,16 +258,11 @@ export default {
         }
         //全局厂房最佳视图
         async function backMasterViewByFac(){
-            console.log(window.CurrentTargetType);
             if(window.CurrentTargetType!='FAC') return;
             // player.Native.Camera.moveTo([235.678127000173, 13.38107286701451, 74.13573809425804], [-1248.3191825020908, -262.59031050373517, -409.93944372657353], [-0.30023176822741604, -0.055832565112502126, 0.9522308596238611], 1);
             await player.Native.Camera.moveTo([132.11876502209185, -440.46670198759625, 492.25734718993556],
-            [-640.8528070063287, 2116.1462138868947, -2471.4015229045867],
+            [-45.87571144104003, -44.632896423339844, 43.90447044372559],
             [-0.2149817792494004, 0.7110548607426664, 0.6694653236762824], 1);
-            // 使用异步函数，应该是需要等待模型相机变化完成后才能定位
-            setTimeout(async()=> {
-                if(window.CurrentTargetType=='FAC') await player.Native.Camera.setAnchorPos([-45.87571144104003, -44.632896423339844, 43.90447044372559]);
-            }, 2000);
         }
 
         async function updateMarkerData(){

src/pages/components/In02.vue

@@ -742,13 +742,9 @@ export default {
                 }
             }
             // player.Native.Camera.moveTo([-60.91624261330108, -39.68511717426356, 85.99570940739352], [-61.26059834308166, -0.225858934410347, -0.5930273740619612], [-0.007940809332449061, 0.9099266223396253, 0.41469324265623975], 1);
-            player.Native.Camera.moveTo([7.630977787770181, -19.831384507538644, 3.1479712959809714], [-76.14185573007973, -18.383967627451927, -10.437484866007], [-0.1600317165278932, 0.0027650086325702416, 0.9871080003892169], 1);
-            // 使用异步函数
-            (async () => {
-                setTimeout(function() {
-                    if(window.CurrentTargetType=='IN02') player.Native.Camera.setAnchorPos([-18.374309539794922, -20.014415740966797, 0]);
-                }, 2000);
-            })();
+            player.Native.Camera.moveTo([7.630977787770181, -19.831384507538644, 3.1479712959809714], 
+            [-18.374309539794922, -20.014415740966797, 0], 
+            [-0.1600317165278932, 0.0027650086325702416, 0.9871080003892169], 1);
         }
         //更改指示灯状态.版本2：更改设备标号牌旁边的指示灯模型
         //绿灯为G 红灯为R 黄灯为Y

src/pages/components/In03.vue

@@ -232,7 +232,7 @@ export default {
                 setTimeout(() => {
                     DataFull.GetData();
                     init();
-                }, 500);
+                }, 10);
             }
         },{deep:true,immediate:true})
         watch(() => props.userTimeout, newVal=> {
@@ -630,20 +630,14 @@ export default {
             if(BODY_H_RATE>0.9){
                 //全屏模式下的视角
                 player.Native.Camera.moveTo([-91.64839019242504, -186.23753805841608, 166.78946395819892],
-            [-90.82528929434541, 136.7362546068112, -54.52457853422797],
+            [-80.69618225097656,21.59876251220703,11.815500259399414],
             [0.0014405644117746175, 0.5652582237894268, 0.8249127621831281], 1);
             }else{
                 //非全屏模式下的视角
                 player.Native.Camera.moveTo([-90.4534875451608, -201.60779996809177, 156.1529830648182],
-            [-89.63620356422999, 119.08351214395233, -52.22443982968761],
+            [-80.69618225097656,21.59876251220703,11.815500259399414],
             [0.001388561848385436, 0.544853112866498, 0.838530355619688], 1);
             }
-            // 使用异步函数
-            (async () => {
-                setTimeout(function() {
-                    if(window.CurrentTargetType=='IN03') player.Native.Camera.setAnchorPos([-80.69618225097656,21.59876251220703,11.815500259399414]);
-                }, 2000);
-            })();
         }
         //切换到数据消费后台
         function toAdmin(){

src/pages/main/index.vue

@@ -2,8 +2,12 @@
 <template>
     <div>
         <div v-if="!isLoaded" ref="loading_a1" id="loading_a1"></div>
-        <div v-if="!isLoaded" ref="loading" id="loading">正在加载模型中...</div>
+        <div v-if="!isLoaded" ref="loading" id="loading">正在进入系统中...</div>
         <div v-if="reconnect" class="reconnect">网络连接中断，正在进行重连...</div>
+        <div v-if="loadProgressValue>0 && loadProgressValue<100" class="reconnect">
+            <div class="loadText">模型加载中...</div>
+            <div class="loadProgress" :style="{width:loadProgressValue+'%'}"></div>
+        </div>
         <video ref="EngineContent" autoplay muted style="width: 1920px;height:1080px;">浏览器不支持</video>
         <Fac v-if="currentTargetType=='FAC'" user-role="index" :fac-model-load-state="facModelLoadState"  @markerLClick="facMarkerLClick" @OpenIframeWin="OpenIframeWin"></Fac>
         <In02 ref="In02Ele" v-if="currentTargetType=='IN02'" user-role="index" :click-event="In02ClickEvent" :in02-model-load-state="in02modelloadstate" :user-timeout="AutoPlayer"  @OpenIframeWin="OpenIframeWin"></In02>
@@ -29,19 +33,20 @@ import Bottom from '../components/Bottom.vue';
 import Fac from '../components/Fac.vue';
 import In02 from '../components/In02.vue';
 import In03 from '../components/In03.vue';
-import In04 from '../components/In04.vue';
-import In05 from '../components/In05.vue';
+//import In04 from '../components/In04.vue';
+//import In05 from '../components/In05.vue';
 export default {
     components:{
         Bottom,
         Fac,
         In02,
         In03,
-        In04,
-        In05,
+        //In04,
+        //In05,
     },
     setup() {
         const loading_a1=ref(null);
+        const loadProgressValue=ref(0);
         const EngineContent=ref(null);
         const reconnect=ref(false);
         const isShowIframeWin = ref(false);
@@ -111,14 +116,7 @@ export default {
                 case "IN03":
                     loadIn03Model(playerNative.value);
                     break;
-                case "IN04":
-                    loadIn04Model(playerNative.value);
-                    break;
-                case "IN05":
-                    loadIn05Model(playerNative.value);
-                    break;
             }
-            backMasterView();
         }
         function facMarkerLClick(obj){
             //接收Fac组件中点击标记时的数据
@@ -154,6 +152,7 @@ export default {
                 console.log("Has connected to engine")
                 playerConnState = true
                 reconnect.value = false;
+                isLoaded.value = true;
                 if (reconntimer != null) clearTimeout(reconntimer);
             });
 
@@ -163,15 +162,10 @@ export default {
                 reconnect.value = true;
                 isClearEle.value=true;
                 playerConnState = false
-                isLoaded.value = false;
                 facModelLoadState.value=false;
                 in02modelloadstate.value=false;
                 in03modelloadstate.value=false;
-                in04modelloadstate.value = false;
-                in05modelloadstate.value = false;
                 window.IN03Markers=null;
-                window.IN04Markers=null;
-                window.IN05Markers=null;
                 AutoPlayer.value=false;
                 EngineContent.value.pause();
                 if(e=='signal websocket error'){
@@ -194,7 +188,7 @@ export default {
                     //5秒还未连接成功时直接刷新页面
                     if(!playerConnState){
                         console.log('自动连接超时，自动页面刷新')
-                        //window.location.reload();
+                        window.location.reload();
                     }
                 }, 9000);
             });
@@ -215,6 +209,36 @@ export default {
                 modelLoadState={};
                 EngineContent.value.play();
                 playerNative.value =Native;
+                loadProgressValue.value = 1;//模型加载初始进度
+                //模型加载完成监听处理
+                Native.Model.EventProgressEnd.connect(function(step,id,name){
+                    if(window.CurrentTargetType==name){
+                        //当前模型加载完成，添加进度动画效果，否则会是一闪而过的效果
+                        loadProgressValue.value=99;
+                        setTimeout(() => {
+                            //动画效果为固定的0.5s，多0.5s才让进度消失
+                            loadProgressValue.value=100;
+                        }, 1000);
+                    }
+                    if("FAC"==name){
+                        player.Native.Model.setModelVisible(name,window.CurrentTargetType==name?true:false);
+                        facModelLoadState.value=true;//全厂模型加载完成                        
+                        player.Native.CameraAnimation.clearKeyFrame();
+                    }else if("IN02"==name){
+                        in02modelloadstate.value=true;
+                        player.Native.Model.setModelVisible(name,window.CurrentTargetType==name?true:false);
+                    }else if("IN03"==name){
+                        in03modelloadstate.value=true;
+                        player.Native.Model.setModelVisible(name,window.CurrentTargetType==name?true:false);
+                    }
+                    modelLoadState[name]=true;                  
+                });
+                //模型加载中监听处理
+                Native.Model.EventProgress.connect(function(v,hander,name){   
+                    //当进度大于0.99时，交由EventProgressEnd监听处理            
+                    if(window.CurrentTargetType!=name || v>0.99 ||v<1) return;
+                    loadProgressValue.value = (v*100).toFixed(0);
+                });
                 // // 选择Pickup工具
                 player.Native.Tools.setCurrentTool("system.Pickup");
                 player.Native.Settings.set('skybox',"string","null");
@@ -244,20 +268,10 @@ export default {
                     case "IN03":
                         loadIn03Model(Native);
                         break;
-                    case "IN04":
-                        loadIn04Model(Native);
-                        break;
-                    case "IN05":
-                        loadIn05Model(Native);
-                        break;
                     default:
                         loadFacModel(Native);
                         break;
                 }
-                //调整视角，使其达到最佳初始效果
-                //backMasterView();
-                //player.Native.Camera.moveToItem(lastPtr,1);
-
                 Native.ModelTree.EventBrowseLClick.connect((event) => {
                     if(event.object==null) return;
 
@@ -291,17 +305,10 @@ export default {
                                     case "IN03":
                                         loadIn03Model(Native);
                                         break;
-                                    case "IN04":
-                                        loadIn04Model(Native);
-                                        break;
-                                    case "IN05":
-                                        loadIn05Model(Native);
-                                        break;
                                     default:
                                         break;
                                 }
                                 currentTargetType.value=inTxt;
-                                backMasterView();
                             }else{
                                // moveFacAnything("LClick", event);
                             }
@@ -316,14 +323,6 @@ export default {
                         //move03Anything("LClick", event);
                         In03ClickEvent.value = event;
                     }
-                    if(currentTargetType.value=="IN04") {
-                        //move03Anything("LClick", event);
-                        In04ClickEvent.value = event;
-                    }
-                    if(currentTargetType.value=="IN05") {
-                        //move03Anything("LClick", event);
-                        In05ClickEvent.value = event;
-                    }
                 });
                 Native.ModelTree.EventBrowseRClick.connect((event) => {
                     if(markerLClickObj!=null) return;
@@ -337,76 +336,40 @@ export default {
         }
         async function loadFacModel(Native){
             if(currentTargetType.value=="FAC") return;
-            isLoaded.value=false;
             currentTargetType.value="FAC";
-            await player.Native.Model.setModelVisible("IN02",false);
-            await player.Native.Model.setModelVisible("IN03",false);
-            await player.Native.Model.setModelVisible("IN04",false);
-            await player.Native.Model.setModelVisible("IN05",false);
-            if(modelLoadState[currentTargetType.value]==null){
-                var cf = "data://models/T_ALL.pr";
-                var errStr = await PlayerUtils.call(Native.Model.loadModel, currentTargetType.value, cf);
-                modelLoadState[currentTargetType.value] = true;
-            }
             await player.Native.Settings.set('ambientIndenty', 'float', 0.39);//初始化环境光补偿
             await player.Native.Settings.set('diffuseIntensity', 'float', 1.2);//初始化光线强度
             await player.Native.Settings.set('specularIntensity', 'float', 0.64);//初始化高光强度
-            await player.Native.Model.setModelVisible(currentTargetType.value,true);
-            facModelLoadState.value=true;//全厂模型加载完成
-            await player.Native.CameraAnimation.clearKeyFrame();
-            setTimeout(async() => {
-                var cf = "data://models/T_02.pr";
-                await PlayerUtils.call(Native.Model.loadModel, 'IN02', cf);
-                modelLoadState['IN02']=true;
-                await player.Native.Model.setModelVisible('IN02',false);
-                var cf = "data://models/T_03.pr";
-                await PlayerUtils.call(Native.Model.loadModel, 'IN03', cf);
-                modelLoadState['IN03']=true;
-                await player.Native.Model.setModelVisible('IN03',false);
-                isLoaded.value=true;//所有模型加载，通知导航菜单可以进行切换操作了
-            }, 100);
-        }
-        //后整
-        async function loadIn05Model(Native){
-            player.Native.Settings.set('ambientIndenty', 'float', 1);//初始化环境光补偿
-            player.Native.Settings.set('diffuseIntensity', 'float', 2.5);//初始化光线强度
-            player.Native.Settings.set('specularIntensity', 'float', 0.6);//初始化高光强度
-            if(currentTargetType.value=="IN05") return;
-            currentTargetType.value="IN05";
-            await player.Native.Model.setModelVisible("FAC",false);
-            await player.Native.Model.setModelVisible("IN02",false);
-            await player.Native.Model.setModelVisible("IN03",false);
-            await player.Native.Model.setModelVisible("IN04",false);
-
-            if(modelLoadState[currentTargetType.value]==null){
-                var cf = "data://models/T_03.pr";
-                var errStr = await PlayerUtils.call(Native.Model.loadModel, 'IN03', cf);
-                modelLoadState[currentTargetType.value] = true;
-            }
-            //showMarker(currentTargetType.value);
-            await player.Native.Model.setModelVisible("IN03",true);
-            in05modelloadstate.value = true;
-        }
-        //前整
-        async function loadIn04Model(Native){
-            player.Native.Settings.set('ambientIndenty', 'float', 1);//初始化环境光补偿
-            player.Native.Settings.set('diffuseIntensity', 'float', 2.5);//初始化光线强度
-            player.Native.Settings.set('specularIntensity', 'float', 0.6);//初始化高光强度
-            if(currentTargetType.value=="IN04") return;
-            currentTargetType.value="IN04";
-            await player.Native.Model.setModelVisible("FAC",false);
+            if(modelLoadState[currentTargetType.value]==null){                
+                var cf = "data://models/T_ALL.pr";
+                //var errStr = await PlayerUtils.call(Native.Model.loadModel, currentTargetType.value, cf);
+                //异步加载模型，加载进度通过EventProgress及EventProgressEnd进行监听
+                PlayerUtils.call(Native.Model.loadModelWithParam, currentTargetType.value, cf, {
+                  "loadThreshold": 10000,
+                  "unloadThreshold": 100000,
+                  "dynamicLoadEnabled ": true
+                });
+                if(modelLoadState['IN02']==null){
+                    var cf = "data://models/T_02.pr";
+                    PlayerUtils.call(Native.Model.loadModelWithParam, 'IN02', cf, {
+                      "loadThreshold": 10000,
+                      "unloadThreshold": 100000,
+                      "dynamicLoadEnabled ": true
+                    });      
+                }
+                if(modelLoadState['IN03']==null){
+                    var cf = "data://models/T_03.pr";
+                    PlayerUtils.call(Native.Model.loadModelWithParam, 'IN03', cf, {
+                      "loadThreshold": 10000,
+                      "unloadThreshold": 100000,
+                      "dynamicLoadEnabled ": true
+                    });        
+                }
+                return;
+            }  
             await player.Native.Model.setModelVisible("IN02",false);
             await player.Native.Model.setModelVisible("IN03",false);
-            await player.Native.Model.setModelVisible("IN05",false);
-            if(modelLoadState[currentTargetType.value]==null){
-                var cf = "data://models/T_03.pr";
-                var errStr = await PlayerUtils.call(Native.Model.loadModel, 'IN03', cf);
-                modelLoadState[currentTargetType.value] = true;
-            }
-            //showMarker(currentTargetType.value);
-
-            await player.Native.Model.setModelVisible("IN03",true);
-            in04modelloadstate.value = true;
+            await player.Native.Model.setModelVisible(currentTargetType.value,true);          
         }
         //印花
         async function loadIn03Model(Native){
@@ -414,24 +377,21 @@ export default {
             player.Native.Settings.set('diffuseIntensity', 'float', 2.5);//初始化光线强度
             player.Native.Settings.set('specularIntensity', 'float', 0.6);//初始化高光强度
             if(currentTargetType.value=="IN03") return;
-            isLoaded.value=false;
             currentTargetType.value="IN03";
+            if(modelLoadState[currentTargetType.value]==null){
+                loadProgressValue.value = 0.1;
+                var cf = "data://models/T_03.pr";
+                //异步加载模型，加载进度通过EventProgress及EventProgressEnd进行监听
+                PlayerUtils.call(Native.Model.loadModelWithParam, currentTargetType.value, cf, {
+                  "loadThreshold": 10000,
+                  "unloadThreshold": 100000,
+                  "dynamicLoadEnabled ": true
+                });
+                return;
+            }
             await player.Native.Model.setModelVisible("FAC",false);
             await player.Native.Model.setModelVisible("IN02",false);
-            await player.Native.Model.setModelVisible("IN04",false);
-            await player.Native.Model.setModelVisible("IN05",false);
-            var cf = "data://models/T_03.pr";
-            if(modelLoadState[currentTargetType.value]!=null){
-                await player.Native.Model.unloadModel('IN03');
-                console.log('IN03模型卸载完成')
-            }
-            await PlayerUtils.call(Native.Model.loadModel, 'IN03', cf);
-            modelLoadState[currentTargetType.value] = true;
-            //showMarker(currentTargetType.value);
             await player.Native.Model.setModelVisible(currentTargetType.value,true);
-            player.Native.CameraAnimation.clearKeyFrame();
-            in03modelloadstate.value=true;
-            isLoaded.value=true;
         }
         //经编
         async function loadIn02Model(Native){
@@ -439,133 +399,22 @@ export default {
             player.Native.Settings.set('diffuseIntensity', 'float', 0.8);//初始化光线强度
             player.Native.Settings.set('specularIntensity', 'float', 0.64);//初始化高光强度
             if(currentTargetType.value=="IN02") return;
-            isLoaded.value=false;
             currentTargetType.value="IN02";
-            await player.Native.Model.setModelVisible("FAC",false);
-            await player.Native.Model.setModelVisible("IN03",false);
-            await player.Native.Model.setModelVisible("IN04",false);
-            await player.Native.Model.setModelVisible("IN05",false);
-
             if(modelLoadState[currentTargetType.value]==null){
+                loadProgressValue.value = 0.1;
                 var cf = "data://models/T_02.pr";
-                var errStr = await PlayerUtils.call(Native.Model.loadModel, currentTargetType.value, cf);
-                modelLoadState[currentTargetType.value]=true;
+                //异步加载模型，加载进度通过EventProgress及EventProgressEnd进行监听
+                PlayerUtils.call(Native.Model.loadModelWithParam, 'IN02', cf, {
+                  "loadThreshold": 10000,
+                  "unloadThreshold": 100000,
+                  "dynamicLoadEnabled ": true
+                }); 
+                return;
             }
+            await player.Native.Model.setModelVisible("FAC",false);
+            await player.Native.Model.setModelVisible("IN03",false);
             await player.Native.Model.setModelVisible(currentTargetType.value,true);
-            showMarker(currentTargetType.value);
-            in02modelloadstate.value=true;
-            isLoaded.value=true;
-        }
-        async function showMarker(type){
-            console.log(type)
-            console.log('MarkerMapFac:',MarkerMapFac)
-            for (var t in MarkerMapFac) {
-                if(t==type){
-                    for (var markPtr in MarkerMapFac[t]) {
-                        var options = MarkerMapFac[t][markPtr];
-                        options["visible"]=true;
-                        await player.Native.GisMarker.update(markPtr, options);
-                    }
-                }else{
-                    for (var markPtr in MarkerMapFac[t]) {
-                        var options = MarkerMapFac[t][markPtr];
-                        options["visible"]=false;
-                        await player.Native.GisMarker.update(markPtr, options);
-                    }
-                }
-            }
-        }
-        function backMasterView() {
-            switch(currentTargetType.value){
-                case "FAC":
-                    //backMasterViewByFac();
-                    break;
-                case "IN02":
-                    //backMasterViewBy02();
-                    break;
-                case "IN03":
-                    //backMasterViewBy03();
-                    break;
-                case "IN04":
-                    //backMasterViewBy04();
-                    break;
-                case "IN05":
-                    //backMasterViewBy05();
-                    break;
-            }
-        }
-
-        //全局厂房最佳视图
-        function backMasterViewByFac(){
-            if (AutoPlayer.value) {
-                AutoPlayer.value=false;
-                try {
-                    player.Native.CameraAnimation.stop();
-                } catch (e) {
-                }
-            }
-            // player.Native.Camera.moveTo([235.678127000173, 13.38107286701451, 74.13573809425804], [-1248.3191825020908, -262.59031050373517, -409.93944372657353], [-0.30023176822741604, -0.055832565112502126, 0.9522308596238611], 1);
-            player.Native.Camera.moveTo([286.03479667714066, -369.1462098899696, 250.99077822208548], [-1630.186261661935, 1578.4562059189793, -1508.5247276647053],[-0.3797261858729431, 0.38594484375048804, 0.840746454851163], 1);
-            // 使用异步函数
-            (async () => {
-                setTimeout(function() {
-                    player.Native.Camera.setAnchorPos([-45.87571144104003, -44.632896423339844, 43.90447044372559]);
-                }, 3000);
-            })();
         }
-
-        //印花 3号楼内部最佳视图
-        function backMasterViewBy03() {
-            if (AutoPlayer.value) {
-                AutoPlayer.value=false;
-                try {
-                    player.Native.CameraAnimation.stop();
-                } catch (e) {
-                }
-            }
-            player.Native.Camera.moveTo([-112.11831605370315, -39.47491915621944, 55.053722411257986], [-111.40213220295327, 103.19683033795573, -21.927318724155974], [0.0023836205084244643, 0.4748435861970737, 0.880066978701493], 1);
-            // 使用异步函数
-            (async () => {
-                setTimeout(function() {
-                    player.Native.Camera.setAnchorPos([-109.86441802978516,37.72066879272461,11.815499305725098]);
-                }, 3000);
-            })();
-        }
-        //前整最佳视图
-        function backMasterViewBy04() {
-            if (AutoPlayer.value) {
-                AutoPlayer.value=false;
-                try {
-                    player.Native.CameraAnimation.stop();
-                } catch (e) {
-                }
-            }
-            player.Native.Camera.moveTo([-165.95599185954217, -45.64071153770574, 51.618717703740046], [-164.97558683415676, 188.00984417962832, -47.631915576574826], [0.0016404996757448046, 0.3909646023491811, 0.9204042527448256], 1);
-            // 使用异步函数
-            (async () => {
-                setTimeout(function() {
-                    player.Native.Camera.setAnchorPos([-179.36495971679688,20.81890106201172,18.464128494262695]);
-                }, 3000);
-            })();
-        }
-        //后整最佳视图
-        function backMasterViewBy05() {
-            if (AutoPlayer.value) {
-                AutoPlayer.value=false;
-                try {
-                    player.Native.CameraAnimation.stop();
-                } catch (e) {
-                }
-            }
-            player.Native.Camera.moveTo([-1.4278872234970912, -35.860292172842726, 45.17447131604416], [-0.9361737274384958, 62.09447832231165, 2.337398320693808], [0.0020112694631236063, 0.40066713694655265, 0.916221479865103], 1);
-            // 使用异步函数
-            (async () => {
-                setTimeout(function() {
-                    player.Native.Camera.setAnchorPos([3.2281014919281006,22.60576629638672,18.464128494262695]);
-                }, 3000);
-            })();
-        }
-
         onMounted(()=>{
             window.addEventListener("click", handleBodyClick);
             ShowLoading();
@@ -588,6 +437,7 @@ export default {
             isLoaded,
             currentTargetType,
             loading_a1,
+            loadProgressValue,
             reconnect,
             EngineContent,
             AutoPlayer,
@@ -604,7 +454,6 @@ export default {
             handleBodyClick,
             senceInit,
             getBottomBtnImg,
-            backMasterView,
             markerLClickObj,
             loadNavModel,
         }

src/styles/main.css

@@ -122,16 +122,35 @@
      }
     .reconnect{
         position: absolute;
-        top:0px;
-        left: 0px;
-        height: 100%;
-        width: 100%;
-        background-color: #1b0f0f9b;
+        top:50%;
+        left: 50%;
+        height: 40px;
+        width: 400px;
+        background-color: #09374c91;
         color: #fff;
-        font-size: 24px;
+        font-size: 20px;
+        line-height: 38px;
         z-index: 1000001;
         text-align: center;
-        padding-top: 25%;
+        margin-top: -20px;
+        margin-left: -200px;
+        border: 1px solid #2ea9b8;
+        border-radius: 5px;
+    }
+    .reconnect .loadProgress{
+        width: 1px;
+        background-color: #008899;
+        height: 40px;
+        border-radius: 3px;
+        position: absolute;
+        z-index: 0;
+        transition: width 0.5s ease-in-out;
+    }
+    .reconnect .loadText{
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        text-align: center;
     }
     #iframeWin .content,#iframeWin iframe{
         height: 724px;