Commit 1b534eff authored by 李苏's avatar 李苏 💬

解决div和相机控制器冲突的问题,新增选中是否近景选项

parent b7bb7246
...@@ -6,26 +6,26 @@ ...@@ -6,26 +6,26 @@
</div> </div>
<!-- 视角工具栏--> <!-- 视角工具栏-->
<div class="toolButton2"> <div class="toolButton2">
<div class="flex1 text-center"> <div class="flex1 text-center">
<el-select :popper-append-to-body='false' style="width: 100px;background-color: rgba(0, 0, 0, 0.0);" @change="flowPieDataChange" v-model="flowPieData" clearable placeholder="绘制流动"> <el-select :popper-append-to-body='false' style="width: 100px;background-color: rgba(0, 0, 0, 0.0);"
<el-option v-for="(item, index) in allPieData" :key="index" :value="item.name"> @change="flowPieDataChange" v-model="flowPieData" clearable placeholder="绘制流动">
{{ item.name }} <el-option v-for="(item, index) in allPieData" :key="index" :value="item.name">
</el-option> {{ item.name }}
</el-select> </el-option>
</div> </el-select>
<div class="flex1 text-center"> </div>
<el-switch <div class="flex1 text-center">
style="color: #fff ;" <el-switch style="color: #fff ;font-size: 12px;" v-model="flowDirection" active-text="正向" inactive-text="反向">
v-model="flowDirection" </el-switch>
active-text="正向" </div>
inactive-text="反向"> <div class="flex1 text-center">
</el-switch> <el-checkbox v-model="xzjj">选中时近景</el-checkbox>
</div> </div>
</div> </div>
<div class="toolButton"> <div class="toolButton">
<div class="flex1 text-center"> <div class="flex1 text-center">
<span @click="reView"><i class="el-icon-view"></i>重置视角</span> <span @click="reView"><i class="el-icon-view"></i>重置视角</span>
</div> </div>
<div class="flex1 text-center"> <div class="flex1 text-center">
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<div class="flex1 text-center"> <div class="flex1 text-center">
<span @click="clearSelected"><i class="el-icon-circle-close"></i>清除选中</span> <span @click="clearSelected"><i class="el-icon-circle-close"></i>清除选中</span>
</div> </div>
<!-- <el-select @change="flowPieDataChange" v-model="flowPieData" clearable placeholder="请选择"> <!-- <el-select @change="flowPieDataChange" v-model="flowPieData" clearable placeholder="请选择">
<el-option v-for="(item, index) in allPieData" :key="index" :value="item.name"> <el-option v-for="(item, index) in allPieData" :key="index" :value="item.name">
{{ item.name }} {{ item.name }}
</el-option> </el-option>
...@@ -57,10 +57,8 @@ ...@@ -57,10 +57,8 @@
</div> </div>
</div> --> </div> -->
<!-- 右侧操作边框--> <!-- 右侧操作边框-->
<div v-show='selectedModel.name' class="rightOpt"> <div v-show='selectedModel.name' class="rightOpt" ref="rightOpt">
<!-- 33% 分割--> <div class="full padding5" style="height: 100%;">
<div class="full padding5" style="height: 33%;">
<!-- title-->
<div class="optTitle"> <div class="optTitle">
{{selectedModel.name?selectedModel.name+'的':''}}设备信息 {{selectedModel.name?selectedModel.name+'的':''}}设备信息
</div> </div>
...@@ -70,7 +68,7 @@ ...@@ -70,7 +68,7 @@
<i class="bottomL"></i> <i class="bottomL"></i>
<i class="bottomR"></i> <i class="bottomR"></i>
<div class="full"> <div class="full">
<!-- 一级内容-->
</div> </div>
...@@ -133,20 +131,23 @@ ...@@ -133,20 +131,23 @@
this.init() this.init()
this.tdClick() this.tdClick()
this.getData() this.getData()
this.canNotMousedown([
this.$refs.rightOpt
])
}) })
}, },
beforeDestroy() { beforeDestroy() {
this.viewer.canRequestAnimationFrame = false this.viewer.canRequestAnimationFrame = false
}, },
deactivated(){ deactivated() {
this.viewer.canRequestAnimationFrame = false this.viewer.canRequestAnimationFrame = false
}, },
activated(){ activated() {
try { try {
this.viewer.canRequestAnimationFrame = true this.viewer.canRequestAnimationFrame = true
this.viewer.reInit() this.viewer.reInit()
}catch(e){ } catch (e) {
rconsole.error(e) rconsole.error(e)
} }
...@@ -155,7 +156,8 @@ ...@@ -155,7 +156,8 @@
}, },
data() { data() {
return { return {
flowDirection:true, xzjj: true,
flowDirection: true,
flowPieData: '', flowPieData: '',
/* 流向数据*/ /* 流向数据*/
allPieData: [], allPieData: [],
...@@ -174,17 +176,26 @@ ...@@ -174,17 +176,26 @@
} }
}, },
watch:{ watch: {
flowDirection(){ flowDirection() {
if (this.allFlowObject) { if (this.allFlowObject) {
this.allFlowObject.forEach((item) => { this.allFlowObject.forEach((item) => {
item.reverseMapRotation(); item.reverseMapRotation();
}); });
} }
} }
}, },
methods: { methods: {
flowPieDataChange(val){ /* 解决com和 相机控制器事件冲突的问题*/
canNotMousedown(domList) {
domList.forEach(vdom => {
vdom.addEventListener('mousedown', function(event) {
event.preventDefault();
});
})
},
flowPieDataChange(val) {
this.handlerAllFlow() this.handlerAllFlow()
}, },
/* 绘制流动方法 /* 绘制流动方法
...@@ -220,9 +231,9 @@ ...@@ -220,9 +231,9 @@
o.points.forEach((item) => { o.points.forEach((item) => {
box.expandByPoint(new THREE.Vector3(...item)); box.expandByPoint(new THREE.Vector3(...item));
}); });
let point=box.max let point = box.max
let finallyPoint = this.getCameraPosition(5,point ) let finallyPoint = this.getCameraPosition(5, point)
this.cameraTo(finallyPoint.x, finallyPoint.y, finallyPoint.z, point.x, point.y, point.z) this.cameraTo(finallyPoint.x, finallyPoint.y, finallyPoint.z, point.x, point.y, point.z)
} }
}); });
}, },
...@@ -239,15 +250,15 @@ ...@@ -239,15 +250,15 @@
this.allPieData = data.filter((item) => { this.allPieData = data.filter((item) => {
return item.children.some((child) => child.data.length >= 2); return item.children.some((child) => child.data.length >= 2);
}); });
console.log( this.allPieData,' this.allPieData') console.log(this.allPieData, ' this.allPieData')
}) })
}, },
/* 流向动画*/ /* 流向动画*/
drawPipe(positions, radius, direction) { drawPipe(positions, radius, direction) {
const viewer = this.viewer; const viewer = this.viewer;
const points = positions.map( const points = positions.map(
/* 根据本身的模型定位来*/ /* 根据本身的模型定位来*/
(item) => new THREE.Vector3(item[0] / 1000-42, item[2] / 1000-10, -item[1] / 1000) (item) => new THREE.Vector3(item[0] / 1000 - 42, item[2] / 1000 - 10, -item[1] / 1000)
); );
const flowObject = new VT.TubeLine({ const flowObject = new VT.TubeLine({
points: points, points: points,
...@@ -394,10 +405,10 @@ ...@@ -394,10 +405,10 @@
return return
} }
let model let model
if(intersects[0].object.name==''){ if (intersects[0].object.name == '') {
model= intersects[1].object model = intersects[1].object
}else{ } else {
model= intersects[0].object model = intersects[0].object
} }
this.selectedModel = model this.selectedModel = model
...@@ -426,10 +437,13 @@ ...@@ -426,10 +437,13 @@
wireframe: false, wireframe: false,
}) })
/* */ /* */
if (this.xzjj) {
let point = intersects[0].point
let finallyPoint = this.getCameraPosition(5, point)
this.cameraTo(finallyPoint.x, finallyPoint.y, finallyPoint.z, point.x, point.y, point.z)
}
let point = intersects[0].point
let finallyPoint = this.getCameraPosition(5, point)
this.cameraTo(finallyPoint.x, finallyPoint.y, finallyPoint.z, point.x, point.y, point.z)
} }
}) })
...@@ -509,17 +523,36 @@ ...@@ -509,17 +523,36 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .el-switch__core {
height: 16px;
}
::v-deep .el-switch__label{ ::v-deep .el-switch__core::after {
height: 12px;
}
::v-deep .el-switch__label {
color: #fff; color: #fff;
} }
::v-deep .el-switch__label.is-active{
::v-deep .el-checkbox__label {
color: #fff !important;
}
::v-deep .el-switch__label * {
font-size: 12px !important;
}
::v-deep .el-switch__label.is-active {
color: #26c6f0; color: #26c6f0;
} }
::v-deep .el-input__inner { ::v-deep .el-input__inner {
background-color: rgba(0, 0, 0, 0.0); background-color: rgba(0, 0, 0, 0.0);
color: #fff; color: #fff;
} }
.nullbp { .nullbp {
border: 0; border: 0;
padding: 0; padding: 0;
...@@ -566,9 +599,10 @@ ...@@ -566,9 +599,10 @@
line-height: 40px; line-height: 40px;
min-width: 250px; min-width: 250px;
color: #fff; color: #fff;
font-size: 13px; font-size: 12px;
// background-color: #07417a; // background-color: #07417a;
} }
.toolButton2 { .toolButton2 {
display: flex; display: flex;
margin-top: 18px; margin-top: 18px;
...@@ -577,7 +611,7 @@ ...@@ -577,7 +611,7 @@
z-index: 12; z-index: 12;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
min-width: 250px; min-width: 350px;
color: #26c6f0; color: #26c6f0;
font-size: 13px; font-size: 13px;
// background-color: #07417a; // background-color: #07417a;
......
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