增加3d模型

device-manager-ui/admin/src/views/analysis/components/three/three.vue

@@ -5,17 +5,19 @@
             <div id="alert-css2" class="three-card">
                 <div ref="marke">
                     <div class="marke">
-                        <div class="marke-win">{{ checkWind.window_name }}-{{ checkWind.window_fromnum }}</div>
+                        <div class="marke-win">{{ device.deviceName }} <span style="color: #FF4A4A;">({{ checkItem.alarmTypeStr }})</span></div>
                         <div class="marke-box">
                             <div class="marke-box-c">
-                                <p>设备编码:1565155</p>
-                                <p>MAC地址:70:70:70:70:70:705</p>
-                                <p>设备位置：1楼医保大厅</p>
-                                <p>负责人：刘德华</p> 
-                                <p>联系电话：13088088888</p>
-                                <p class="b">所在部门：{{ checkWind.section_name }}</p>
-                                <p class="y">办理业务：<span v-for="(itemm, index) in checkWind.business" :key="index"
-                                        style="padding-right:5px">{{ itemm }}</span></p>
+                                <p>设备编码:{{device.deviceName}}</p>
+                                <p>MAC地址:{{ device.deviceCode }}</p>
+                                <p>设备位置：{{ device.deviceName }}</p>
+                                <p>负责人：{{ device.leadingOfficial }}</p> 
+                                <p>联系电话：{{ device.leadingOfficialTelephone }}</p>
+                                <p>告警程度：--</p>
+                                <p>告警时间：{{$moment(checkItem.alarmTime).format('YYYY-MM-DD HH:mm')}}</p>
+                                <p>告警状态：<span style="color: #FF4A4A;">({{ checkItem.alarmTypeStr }})</span></p>
+                                <p>处理人：--</p> 
+                                <p>处理时间：--</p>
                             </div>
                             <div class="ant-popover-arrow">
                                 <img src="./ycjg.png" alt="">
@@ -124,8 +126,8 @@ export default {
         checkItem:{
             handler: function (str) {
                 let winName = str.device.deviceCode
-                // Tips.visible = true
-                console.log(keyobj,winName)
+                // let winName = '7E_CE_8B_C5_35_05'
+                // console.log(keyobj,winName,keyobj[winName])
                 if (keyobj[winName]) {
                     const { x, y, z } = keyobj[winName].positions
                     Tips.position.set(x, y, z);//文字地址
@@ -140,24 +142,7 @@ export default {
             },
             deep: true
         },
-        bm: {
-            handler: function (str) {
-                // 保存节点
-                if (bmMark.length == 0) {
-                    bmMark = document.querySelectorAll(".check_bm")
-                }
-                bmMark.forEach(v => {
-                    let reg = new RegExp(`^${str}`, 'g')
-                    if (v.dataset.name.search(reg) > -1 && v.dataset.lv == this.lv) {
-                        v.style.opacity = 1
-                    } else {
-                        v.style.opacity = 0
-                    }
-                })
-                console.log()
-            },
-            deep: true
-        },
+        
         winMarkeList: {
             handler: function (v) {
                 if (v.length > 0) {
@@ -183,12 +168,12 @@ export default {
             },
             deep: true
         },
-        lv: function (e) {
-            modlObj[this.floosrNum].obj.visible = false
-            modlObj[e].obj.visible = true
-            this.floosrNum = e
-            this.css2DOM()
-        },
+        // lv: function (e) {
+        //     modlObj[this.floosrNum].obj.visible = false
+        //     modlObj[e].obj.visible = true
+        //     this.floosrNum = e
+        //     this.css2DOM()
+        // },
         floorArr: {
             handler: function (v) {
                 let obj = {}
@@ -208,6 +193,11 @@ export default {
         },
 
     },
+    computed:{
+        device:function(){
+            return this.checkItem.device || {}
+        }
+    },
     mounted() {
         this._initTree()
         // let files = require.context('', false, /.png$/).keys();
@@ -364,7 +354,7 @@ export default {
             let css2dom = document.getElementById('alert-css2')
             Tips = new CSS2DObject(css2dom);
             Tips.position.set(0, 0, 0);//文字地址
-            Tips.visible = true
+            Tips.visible = false
             scene.add(Tips);
             labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer 
             labelRenderer.setSize(screenW, screenH);
@@ -428,21 +418,30 @@ export default {
                     GLTFLoaders.load(obj, function (obj) {
                         // console.log(obj,'@@@@@@@');
                         const children = obj.scene.children[0].children
+                        const positionY = (iterator-1.7) * 200
                         children.forEach(element => {
                             let objname = element.name
-                            // console.log(objname,"#######");
+                           
                             // mac地址模型
-                            if (objname,length == 17) {
+                            if (objname.length > 12) {
+                                // console.log(objname,"#######",iterator);
+                                try {
+                                    // console.log(objname,"#######");
                                     // 获取外部模型具体点击位置  obj模型没有位置
                                     element.geometry.computeBoundingSphere();
                                     // 球体中心点
                                     let realPosition = element.geometry.boundingSphere.center;
-                                element['positions'] = realPosition
+                                    element['positions'] = JSON.parse(JSON.stringify(realPosition))
+                                    element['positions'].y = positionY
                                     keyobj[objname] = element
+                                } catch (error) {
+                                    
+                                }
+                                
                             }
                   
                         });
-                        const positionY = (iterator-1) * 200
+                        
                         // if (_this.lv !== iterator) {
                         //     obj.scene.visible = false
                         //     // obj.scene.position.y = 100
@@ -596,30 +595,30 @@ export default {
 }
 
 .three-card {
-    width: 314px;
-    height: 73px;
-    margin-top: -130px;
+    width: 200px;
+    height: 241px;
+    margin-top: -140px;
     pointer-events: none;
 }
 
 .marke {
     position: absolute;
     width: 200px;
-    background: rgba(183, 206, 255, .9);
+    background: #3673c39c;
     .marke-win {
         height: 40px;
         line-height: 40px;
-        background: rgba(59, 90, 158, 0.76);
-        font-size: 20px;
+        background: #3672c3;
+        font-size: 14px;
         font-weight: bold;
         color: #fff;
-        padding: 0 24px;
+        padding: 0 12px;
         box-sizing: border-box;
     }
 
     .marke-box {
         margin-top: 4px;
-        padding: 12px 12px 0 12px;
+        padding: 5px 12px 0 12px;
         position: relative;
 
         .marke-box-c {
@@ -653,7 +652,8 @@ export default {
         width: 20px;
         height: 20ox;
         left: 50%;
-        bottom: -40px;
+        margin-left: -10px;
+        bottom: -10;
     }
 
 }