产线名称标记

public/conf.js

@@ -9,6 +9,39 @@ INDEX_TIMEOUT = 5 * 60 * 1000; //首页统计数据定时任务时间
 ALARM_TIMEOUT = 30 * 1000; //告警数据定时任务时间
 StockTypeName={"pt":"盘头","ycl":"原材料","bpb":"白坯布","cp":"成品"};
 StockTypeUnit={"pt":"个","ycl":"KG","bpb":"KG","cp":"KG"};
+//产整线编号标记定义
+IN345MARKERS = {
+    "IN03":{
+        "8#线":["8#线_3F","印花线007","Object274"],
+        "7#线":["7#线_3F","印花线006","Object241"],
+        "6#线":["6#线_3F","印花线005","Object208"],
+        "5#线":["5#线_3F","印花线004","Object175"],
+        "4#线":["4#线_3F","印花线003","Object142"],
+        "3#线":["3#线_3F","印花线002","Object109"],
+        "2#线":["2#线_3F","印花线001","Object076"],
+        "1#线":["1#线_3F","印花线","Object038"],
+    },
+    "IN04":{
+        "8#线":[["8#线_4F","其他015","Cylinder1462"],["8#线_3F","双棍烫光064"]],
+        "7#线":[["7#线_4F","其他014","Cylinder1342"],["7#线_3F","双棍烫光056"]],
+        "6#线":[["6#线_4F","其他013","Cylinder1314"],["6#线_3F","双棍烫光044"]],
+        "5#线":[["5#线_4F","其他012","Cylinder1194"],["5#线_3F","双棍烫光036"]],
+        "4#线":[["4#线_4F","其他011","Cylinder1166"],["4#线_3F","双棍烫光024"]],
+        "3#线":[["3#线_4F","其他010","Cylinder1046"],["3#线_3F","双棍烫光016"]],
+        "2#线":[["2#线_4F","其他009","Cylinder972"],["2#线_3F","双棍烫光004"]],
+        "1#线":[["1#线_4F","其他008","Cylinder003"],["1#线_3F","双棍烫光"]],
+    },
+    "IN05":{
+        "8#线":[["8#线_4F","其他015","Cylinder1471"],["8#线_3F","其他007","Object285"]],
+        "7#线":[["7#线_4F","其他015","Cylinder1397"],["7#线_3F","其他006","Object252"]],
+        "6#线":[["6#线_4F","其他015","Cylinder1323"],["6#线_3F","其他005","Object219"]],
+        "5#线":[["5#线_4F","其他015","Cylinder1249"],["5#线_3F","其他004","Object186"]],
+        "4#线":[["4#线_4F","其他015","Cylinder1175"],["4#线_3F","其他003","Object153"]],
+        "3#线":[["3#线_4F","其他015","Cylinder1101"],["3#线_3F","其他002","Object120"]],
+        //"2#线":[["2#线_4F","其他015","Cylinder981"]],
+        //"1#线":[["1#线_4F","其他015","Cylinder403"]],
+    }
+}
 Date.prototype.Format = function(fmt) { //author: meizz
     var o = {
         "M+": this.getMonth() + 1, //月份

src/pages/components/In03.vue

@@ -3,11 +3,97 @@
     <div for="IN03"  id="top" class="top top03"></div>
 </template>
 <script>
-import { ref } from 'vue';
+import { ref ,watch,onUnmounted} from 'vue';
 export default {
-    props:{},
+    props:{
+        clickEvent:{
+            type:Object,
+            required: true,
+            default:{}
+        },
+        in03ModelLoadState:{
+            type:Boolean
+        },
+        userTimeout:{
+            type:Boolean
+        }
+    },
     setup(props,{emit}) {
-
+        watch(() => props.clickEvent, newVal=> {
+            if(newVal==null){
+                return;
+            }
+            console.log('印花模型点击：',newVal)
+        },{deep:true,immediate:true})
+        watch(() => props.in03ModelLoadState, newVal=> {
+            if(newVal){
+                console.log('印花模型加载状态：',newVal)
+                init();
+            }
+        },{deep:true,immediate:true})
+        watch(() => props.userTimeout, newVal=> {
+            console.log('userTimeout value:',newVal)
+            if(newVal){
+                //if (!AutoPlayer.value && window.CurrentTargetType=='IN02') switchAutoPlayer(); //开启自动漫游               
+            }
+        },{deep:true,immediate:true}) 
+        async function init(){
+            if(player==null || player.Native==null) return;
+            if(window.IN03Markers==null){
+                window.IN03Markers = [];
+                //初始化产线名称标记
+                var rootItem = await player.Native.ModelTree.getRootItems();
+                var rootObj=null;
+                for (var i = 0; i < rootItem.length; i++) {
+                        if(rootItem[i].name=="T03"){
+                            rootObj = rootItem[i]
+                            break;
+                        }
+                }
+                if(rootObj==null){
+                    console.log('未找到该模型的根节点')
+                    return;
+                }      
+                let t1 = new Date().getTime();          
+                var items = await player.Native.ModelTree.getSubItems(rootObj.item)
+                if(items.length==1 && items[0].name=='RootNode') rootObj = items[0];
+                //获取产线列表
+                items =  await player.Native.ModelTree.getSubItems(rootObj.item);
+                let markersDef = IN345MARKERS['IN03'];
+                for(let i=0; i<items.length; i++){
+                    if(items[i].name.indexOf('#线')==-1) continue;
+                    let curLineDef = markersDef[items[i].name];
+                    if(curLineDef==null ||curLineDef.length==0) continue;
+                    var findName = curLineDef[curLineDef.length-1];
+                    let object = await player.Native.ModelTree.findItemByName(findName, items[i].item,true,3);                        
+                    if( object!=null ){
+                            var xyz = await player.Native.ModelTree.getItemShapeInfo(object.item);
+                            var xyz2 = [(xyz.aabb[0][0]) , (xyz.aabb[0][1] ) , (xyz.aabb[0][2]) ];
+                            // 创建设备编号标记                        
+                            var options = {
+                                "text": items[i].name,
+                                "visible": true,
+                                //"maxLod": 110,
+                                //"minLod": 0.1,
+                                "textFontSize": 15,
+                                "textColor": parseInt("0x000fffff"),
+                                "userData":"IN03"
+                            };
+                            options.pos = [xyz2[0]-7, xyz2[1]+2, 15]
+                            var markPtr = await player.Native.GisMarker.create(options);
+                            player.Native.GisMarker.update(markPtr, options);
+                            window.IN03Markers.push(markPtr);
+                    }                        
+                }
+                console.log('--------创建标记总耗时:',new Date().getTime()-t1)
+            }
+        }
+        onUnmounted(()=>{
+            window.IN03Markers.forEach(async ele=>{
+                await player.Native.GisMarker.destroy(ele);
+            })
+            window.IN03Markers=null;
+        })
     }
 }
 </script>

src/pages/components/In04.vue

@@ -3,11 +3,102 @@
     <div for="IN04"  id="top" class="top top03"></div>
 </template>
 <script>
-import { ref } from 'vue';
+import { ref ,watch,onUnmounted} from 'vue';
 export default {
-    props:{},
+    props:{
+        clickEvent:{
+            type:Object,
+            required: true,
+            default:{}
+        },
+        in04ModelLoadState:{
+            type:Boolean
+        },
+        userTimeout:{
+            type:Boolean
+        }
+    },
     setup(props,{emit}) {
 
+        watch(() => props.clickEvent, newVal=> {
+            if(newVal==null){
+                return;
+            }
+            console.log('前整模型点击：',newVal)
+        },{deep:true,immediate:true})
+        watch(() => props.in04ModelLoadState, newVal=> {
+            if(newVal){
+                console.log('前整模型加载状态：',newVal)
+                init();
+            }
+        },{deep:true,immediate:true})
+        watch(() => props.userTimeout, newVal=> {
+            console.log('userTimeout value:',newVal)
+            if(newVal){
+                //if (!AutoPlayer.value && window.CurrentTargetType=='IN02') switchAutoPlayer(); //开启自动漫游               
+            }
+        },{deep:true,immediate:true}) 
+        async function init(){
+            if(player==null || player.Native==null) return;
+            //获取标记列表
+            if(window.IN04Markers==null){
+                window.IN04Markers = [];
+                //初始化产线名称标记
+                var rootItem = await player.Native.ModelTree.getRootItems();
+                var rootObj=null;
+                for (var i = 0; i < rootItem.length; i++) {
+                        if(rootItem[i].name=="T03"){
+                            rootObj = rootItem[i]
+                            break;
+                        }
+                }
+                if(rootObj==null){
+                    console.log('未找到该模型的根节点')
+                    return;
+                }      
+                let t1 = new Date().getTime();          
+                var items = await player.Native.ModelTree.getSubItems(rootObj.item)
+                if(items.length==1 && items[0].name=='RootNode') rootObj = items[0];
+                //获取产线列表
+                items =  await player.Native.ModelTree.getSubItems(rootObj.item);
+                let markersDef = IN345MARKERS['IN04'];
+                for(let i=0; i<items.length; i++){
+                    if(items[i].name.indexOf('#线')==-1) continue;
+                    let curLineDef = markersDef[items[i].name];
+                    if(curLineDef==null ||curLineDef.length==0) continue;
+                    curLineDef.forEach(async element => {    
+                        var findName = element[element.length-1];                    
+                        let object = await player.Native.ModelTree.findItemByName(findName, items[i].item,true,3);                        
+                        if( object!=null ){
+                            var xyz = await player.Native.ModelTree.getItemShapeInfo(object.item);
+                            var xyz2 = [(xyz.aabb[0][0]) , (xyz.aabb[0][1] ) , (xyz.aabb[0][2]) ];
+                            // 创建设备编号标记                        
+                            var options = {
+                                "text": items[i].name,
+                                "visible": true,
+                                //"maxLod": 110,
+                                //"minLod": 0.1,
+                                "textFontSize": 15,
+                                "textColor": parseInt("0x000fffff"),
+                                "userData":"IN04"
+                            };
+                            options.pos = [xyz2[0]+3, xyz2[1]+4, findName.substr(0,2)=='Cy'?34.5: 12]
+                            var markPtr = await player.Native.GisMarker.create(options);
+                            player.Native.GisMarker.update(markPtr, options);
+                            window.IN04Markers.push(markPtr)
+                        }                        
+                    });                    
+                        
+                }
+                console.log('--------创建标记总耗时:',new Date().getTime()-t1)
+            }
+        }
+        onUnmounted(()=>{
+            window.IN04Markers.forEach(async ele=>{
+                await player.Native.GisMarker.destroy(ele);
+            })
+            window.IN04Markers=null;
+        })
     }
 }
 </script>

src/pages/components/In05.vue

@@ -3,11 +3,101 @@
     <div for="IN05"  id="top" class="top top03"></div>
 </template>
 <script>
-import { ref } from 'vue';
+import { ref ,watch,onUnmounted} from 'vue';
 export default {
-    props:{},
+    props:{
+        clickEvent:{
+            type:Object,
+            required: true,
+            default:null
+        },
+        in05ModelLoadState:{
+            type:Boolean
+        },
+        userTimeout:{
+            type:Boolean
+        }
+    },
     setup(props,{emit}) {
-
+        watch(() => props.clickEvent, newVal=> {
+            if(newVal==null){
+                return;
+            }
+            console.log('后整模型点击：',newVal)
+        },{deep:true,immediate:true})
+        watch(() => props.in05ModelLoadState, newVal=> {
+            if(newVal){
+                console.log('后整模型加载状态：',newVal)
+                init();
+            }
+        },{deep:true,immediate:true})
+        watch(() => props.userTimeout, newVal=> {
+            console.log('userTimeout value:',newVal)
+            if(newVal){
+                //if (!AutoPlayer.value && window.CurrentTargetType=='IN02') switchAutoPlayer(); //开启自动漫游               
+            }
+        },{deep:true,immediate:true}) 
+        async function init(){
+            if(player==null || player.Native==null) return;
+            //获取标记列表
+            if(window.IN05Markers==null){
+                window.IN05Markers = [];
+                //初始化产线名称标记
+                var rootItem = await player.Native.ModelTree.getRootItems();
+                var rootObj=null;
+                for (var i = 0; i < rootItem.length; i++) {
+                        if(rootItem[i].name=="T03"){
+                            rootObj = rootItem[i]
+                            break;
+                        }
+                }
+                if(rootObj==null){
+                    console.log('未找到该模型的根节点')
+                    return;
+                }      
+                let t1 = new Date().getTime();          
+                var items = await player.Native.ModelTree.getSubItems(rootObj.item)
+                if(items.length==1 && items[0].name=='RootNode') rootObj = items[0];
+                //获取产线列表
+                items =  await player.Native.ModelTree.getSubItems(rootObj.item);
+                let markersDef = IN345MARKERS['IN05'];
+                for(let i=0; i<items.length; i++){
+                    if(items[i].name.indexOf('#线')==-1) continue;
+                    let curLineDef = markersDef[items[i].name];
+                    if(curLineDef==null ||curLineDef.length==0) continue;
+                    curLineDef.forEach(async element => {    
+                        var findName = element[element.length-1];                    
+                        let object = await player.Native.ModelTree.findItemByName(findName, items[i].item,true,3);                        
+                        if( object!=null ){
+                            var xyz = await player.Native.ModelTree.getItemShapeInfo(object.item);
+                            var xyz2 = [(xyz.aabb[0][0]) , (xyz.aabb[0][1] ) , (xyz.aabb[0][2]) ];
+                            // 创建设备编号标记                        
+                            var options = {
+                                "text": items[i].name,
+                                "visible": true,
+                                //"maxLod": 110,
+                                //"minLod": 0.1,
+                                "textFontSize": 15,
+                                "textColor": parseInt("0x000fffff"),
+                                "userData":"IN05"
+                            };
+                            options.pos = [xyz2[0]-1, xyz2[1]+(findName.substr(0,2)=='Cy'?-2.5:0), findName.substr(0,2)=='Cy'?37.5: 16.3]
+                            var markPtr = await player.Native.GisMarker.create(options);
+                            player.Native.GisMarker.update(markPtr, options);
+                            window.IN05Markers.push(markPtr)
+                        }                        
+                    });                    
+                        
+                }
+                console.log('--------创建标记总耗时:',new Date().getTime()-t1)
+            }
+        }
+        onUnmounted(()=>{
+            window.IN05Markers.forEach(async ele=>{
+                await player.Native.GisMarker.destroy(ele);
+            })
+            window.IN05Markers=null;
+        })
     }
 }
 </script>

src/pages/main/index.vue

@@ -3,12 +3,13 @@
     <div>
         <div v-if="!isLoaded" ref="loading_a1" id="loading_a1"></div>
         <div v-if="!isLoaded" ref="loading" id="loading">正在加载模型中...</div>
+        <div v-if="reconnect" class="reconnect">网络连接中断，正在进行重连...</div>
         <video ref="EngineContent" autoplay muted style="width: 1920px;height:1080px;">浏览器不支持</video>
         <Fac v-if="currentTargetType=='FAC'" :fac-model-load-state="facModelLoadState"  @markerLClick="facMarkerLClick"></Fac>
         <In02 ref="In02Ele" v-if="currentTargetType=='IN02'" :click-event="In02ClickEvent" :in02-model-load-state="in02modelloadstate" :user-timeout="AutoPlayer"></In02>
-        <In03 ref="In03Ele" v-if="currentTargetType=='IN03'"></In03>
-        <In04 v-if="currentTargetType=='IN04'"></In04>
-        <In05 v-if="currentTargetType=='IN05'"></In05>
+        <In03 ref="In03Ele" v-if="currentTargetType=='IN03'" :click-event="In03ClickEvent" :in03-model-load-state="in03modelloadstate" :user-timeout="AutoPlayer"></In03>
+        <In04 v-if="currentTargetType=='IN04'" :click-event="In04ClickEvent" :in04-model-load-state="in04modelloadstate" :user-timeout="AutoPlayer"></In04>
+        <In05 v-if="currentTargetType=='IN05'" :click-event="In05ClickEvent" :in05-model-load-state="in05modelloadstate" :user-timeout="AutoPlayer"></In05>
         <Bottom @loadNavModel="loadNavModel" :fac-model-load-state="facModelLoadState"/>
     </div>
 </template>
@@ -36,8 +37,12 @@ export default {
     setup() {
         const loading_a1=ref(null);
         const EngineContent=ref(null);
+        const reconnect=ref(false);
         const autoplayer_btn =ref(null);
         let In02ClickEvent = ref(null);
+        let In04ClickEvent = ref(null);
+        let In03ClickEvent = ref(null);
+        let In05ClickEvent = ref(null);
         const In03Ele = ref(null);
         let isLoaded = ref(false);
         let isClearEle = ref(false);
@@ -47,6 +52,9 @@ export default {
         window.modelLoadState = {};
         const facModelLoadState=ref(false);
         const in02modelloadstate=ref(false);
+        const in03modelloadstate=ref(false);
+        const in04modelloadstate=ref(false);
+        const in05modelloadstate=ref(false);
         let currentTargetType = ref('');
         let reconntimer=null;
         let MarkerMapFac={};
@@ -125,22 +133,31 @@ export default {
             player.on("Connected", () => {
                 console.log("Has connected to engine")
                 playerConnState = true
+                reconnect.value = false;
                 if (reconntimer != null) clearTimeout(reconntimer);
             });
 
             //3.[可选]监听连接失败消息
             player.on("Disconnected", (e) => {
                 console.log("Disconnected from engine", e);
+                reconnect.value = true;
                 isClearEle.value=true;
                 playerConnState = 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;
                 modelLoadState={};
                 //currentTargetType.value='';
                 //4.[推荐]尝试重新连接
                 reconntimer = setTimeout(function () {
                     console.log('尝试自动重连：', playerConnState)
                     if (playerConnState) return
-                    if(player==null){
+                    if(player==null || player.Native==null){
                         window.location.reload();
                         return;
                     }
@@ -246,7 +263,18 @@ export default {
                         In02ClickEvent.value = event;
                         //In02Ele.updateInfo("LClick", event);
                     }
-                    if(currentTargetType.value=="IN03") move03Anything("LClick", event);
+                    if(currentTargetType.value=="IN03") {
+                        //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;
@@ -295,8 +323,9 @@ export default {
                 var errStr = await PlayerUtils.call(Native.Model.loadModel, 'IN03', cf);
                 modelLoadState[currentTargetType.value] = true;
             }
-            showMarker(currentTargetType.value);
+            //showMarker(currentTargetType.value);
             await player.Native.Model.setModelVisible("IN03",true);
+            in05modelloadstate.value = true;
         }
         //前整
         async function loadIn04Model(Native){
@@ -314,9 +343,10 @@ export default {
                 var errStr = await PlayerUtils.call(Native.Model.loadModel, 'IN03', cf);
                 modelLoadState[currentTargetType.value] = true;
             }
-            showMarker(currentTargetType.value);
+            //showMarker(currentTargetType.value);
 
             await player.Native.Model.setModelVisible("IN03",true);
+            in04modelloadstate.value = true;
         }
         //印花
         async function loadIn03Model(Native){
@@ -334,9 +364,10 @@ export default {
                 var errStr = await PlayerUtils.call(Native.Model.loadModel, 'IN03', cf);
                 modelLoadState[currentTargetType.value] = true;
             }
-            showMarker(currentTargetType.value);
+            //showMarker(currentTargetType.value);
             await player.Native.Model.setModelVisible(currentTargetType.value,true);
             player.Native.CameraAnimation.clearKeyFrame();
+            in03modelloadstate.value=true;
         }
         //经编
         async function loadIn02Model(Native){
@@ -483,11 +514,18 @@ export default {
             isLoaded,
             currentTargetType,
             loading_a1,
+            reconnect,
             EngineContent,
             AutoPlayer,
             In02ClickEvent,
+            In03ClickEvent,
+            In04ClickEvent,
+            In05ClickEvent,
             facModelLoadState,
             in02modelloadstate,
+            in03modelloadstate,
+            in04modelloadstate,
+            in05modelloadstate,
             ShowLoading,
             handleBodyClick,
             senceInit,

src/styles/main.css

@@ -69,6 +69,18 @@
             scrollbar-base-color: #f8f8f8; /*滚动条的基本颜色*/
             /*Cursor: url(mouse.cur); *//*自定义个性鼠标*/
         }
+    .reconnect{
+        position: absolute;
+        top:45%;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: #1b0f0f9b;
+        color: #fff;
+        font-size: 24px;
+        z-index: 1000001;
+        text-align: center;
+    }
     #iframeWin .content,#iframeWin iframe{
         height: 724px;
         width: 100%;

vue.config.js

@@ -16,6 +16,9 @@ module.exports = {
                 // },
             },
         },
+        client:{
+            overlay:false
+        }
     },
     chainWebpack: config => {
         config.module