Skip to content

D
device-new-platform
Commit 50cc3009 authored by ww-xxy's avatar ww-xxy
Browse files
Options

增加3d模型

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