Skip to content

Z
zghywpc-vue
Commit 1b534eff authored by 李苏's avatar 李苏 💬
Browse files
Options

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

parent b7bb7246
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 52 deletions
src/views/yhlywsytst/yhlywsytst/index.vue
View file @ 1b534eff
......@@ -6,26 +6,26 @@
</div>
<!-- 视角工具栏-->
<div class="toolButton2">
<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-option v-for="(item, index) in allPieData" :key="index" :value="item.name">
{{ item.name }}
</el-option>
</el-select>
</div>
<div class="flex1 text-center">
<el-switch
style="color: #fff ;"
v-model="flowDirection"
active-text="正向"
inactive-text="反向">
</el-switch>
</div>
</div>
<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-option v-for="(item, index) in allPieData" :key="index" :value="item.name">
{{ item.name }}
</el-option>
</el-select>
</div>
<div class="flex1 text-center">
<el-switch style="color: #fff ;font-size: 12px;" v-model="flowDirection" active-text="正向" inactive-text="反向">
</el-switch>
</div>
<div class="flex1 text-center">
<el-checkbox v-model="xzjj">选中时近景</el-checkbox>
</div>
</div>
<div class="toolButton">
<div class="flex1 text-center">
<div class="flex1 text-center">
<span @click="reView"><i class="el-icon-view"></i>重置视角</span>
</div>
<div class="flex1 text-center">
......@@ -34,7 +34,7 @@
<div class="flex1 text-center">
<span @click="clearSelected"><i class="el-icon-circle-close"></i>清除选中</span>
</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">
{{ item.name }}
</el-option>
......@@ -57,10 +57,8 @@
</div>
</div> -->
<!-- 右侧操作边框-->
<div v-show='selectedModel.name' class="rightOpt">
<!-- 33% 分割-->
<div class="full padding5" style="height: 33%;">
<!-- title-->
<div v-show='selectedModel.name' class="rightOpt" ref="rightOpt">
<div class="full padding5" style="height: 100%;">
<div class="optTitle">
{{selectedModel.name?selectedModel.name+'的':''}}设备信息
</div>
......@@ -70,7 +68,7 @@
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="full">
<!-- 一级内容-->
</div>
......@@ -133,20 +131,23 @@
this.init()
this.tdClick()
this.getData()
this.canNotMousedown([
this.$refs.rightOpt
])
})
},
beforeDestroy() {
this.viewer.canRequestAnimationFrame = false
},
deactivated(){
this.viewer.canRequestAnimationFrame = false
deactivated() {
this.viewer.canRequestAnimationFrame = false
},
activated(){
activated() {
try {
this.viewer.canRequestAnimationFrame = true
this.viewer.reInit()
}catch(e){
} catch (e) {
rconsole.error(e)
}
......@@ -155,7 +156,8 @@
},
data() {
return {
flowDirection:true,
xzjj: true,
flowDirection: true,
flowPieData: '',
/* 流向数据*/
allPieData: [],
......@@ -174,17 +176,26 @@
}
},
watch:{
flowDirection(){
watch: {
flowDirection() {
if (this.allFlowObject) {
this.allFlowObject.forEach((item) => {
item.reverseMapRotation();
});
this.allFlowObject.forEach((item) => {
item.reverseMapRotation();
});
}
}
},
methods: {
flowPieDataChange(val){
/* 解决com和 相机控制器事件冲突的问题*/
canNotMousedown(domList) {
domList.forEach(vdom => {
vdom.addEventListener('mousedown', function(event) {
event.preventDefault();
});
})
},
flowPieDataChange(val) {
this.handlerAllFlow()
},
/* 绘制流动方法
......@@ -220,9 +231,9 @@
o.points.forEach((item) => {
box.expandByPoint(new THREE.Vector3(...item));
});
let point=box.max
let finallyPoint = this.getCameraPosition(5,point )
this.cameraTo(finallyPoint.x, finallyPoint.y, finallyPoint.z, point.x, point.y, point.z)
let point = box.max
let finallyPoint = this.getCameraPosition(5, point)
this.cameraTo(finallyPoint.x, finallyPoint.y, finallyPoint.z, point.x, point.y, point.z)
}
});
},
......@@ -239,15 +250,15 @@
this.allPieData = data.filter((item) => {
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) {
const viewer = this.viewer;
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({
points: points,
......@@ -394,10 +405,10 @@
return
}
let model
if(intersects[0].object.name==''){
model= intersects[1].object
}else{
model= intersects[0].object
if (intersects[0].object.name == '') {
model = intersects[1].object
} else {
model = intersects[0].object
}
this.selectedModel = model
......@@ -426,10 +437,13 @@
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 @@
</script>
<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;
}
::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;
}
::v-deep .el-input__inner {
background-color: rgba(0, 0, 0, 0.0);
color: #fff;
}
.nullbp {
border: 0;
padding: 0;
......@@ -566,9 +599,10 @@
line-height: 40px;
min-width: 250px;
color: #fff;
font-size: 13px;
font-size: 12px;
// background-color: #07417a;
}
.toolButton2 {
display: flex;
margin-top: 18px;
......@@ -577,7 +611,7 @@
z-index: 12;
height: 40px;
line-height: 40px;
min-width: 250px;
min-width: 350px;
color: #26c6f0;
font-size: 13px;
// 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