Skip to content

Z
zghywpc-vue
Commit 782b9529 authored by huangyy's avatar huangyy
Browse files
Options

Merge branch 'master' of gitlab.gavelinfo.com:lisu/zghywpc-vue

parents 48c12280 1b534eff
Show whitespace changes
Inline Side-by-side
Showing with 234 additions and 16 deletions
public/index.html
View file @ 782b9529
...@@ -198,6 +198,7 @@ ...@@ -198,6 +198,7 @@
<link rel="stylesheet" href="/vt/style/vt.css"> <link rel="stylesheet" href="/vt/style/vt.css">
<script src="/vt/libs/three.min.js"></script> <script src="/vt/libs/three.min.js"></script>
<script src="/vt/vt.js"></script> <script src="/vt/vt.js"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
......
src/views/yhlywsytst/yhlywsytst/index.vue
View file @ 782b9529
...@@ -5,6 +5,25 @@ ...@@ -5,6 +5,25 @@
一回路异物溯源态势图 一回路异物溯源态势图
</div> </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 ;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="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>
...@@ -15,6 +34,11 @@ ...@@ -15,6 +34,11 @@
<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-option v-for="(item, index) in allPieData" :key="index" :value="item.name">
{{ item.name }}
</el-option>
</el-select> -->
</div> </div>
<!-- 左侧操作边框--> <!-- 左侧操作边框-->
<!-- <div class="leftOpt"> <!-- <div class="leftOpt">
...@@ -33,10 +57,8 @@ ...@@ -33,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>
...@@ -46,7 +68,8 @@ ...@@ -46,7 +68,8 @@
<i class="bottomL"></i> <i class="bottomL"></i>
<i class="bottomR"></i> <i class="bottomR"></i>
<div class="full"> <div class="full">
<!-- 一级内容-->
</div> </div>
</div> </div>
...@@ -107,14 +130,37 @@ ...@@ -107,14 +130,37 @@
}) })
this.init() this.init()
this.tdClick() this.tdClick()
this.getData()
this.canNotMousedown([
this.$refs.rightOpt
])
}) })
}, },
beforeDestroy() { beforeDestroy() {
this.viewer.canRequestAnimationFrame = false this.viewer.canRequestAnimationFrame = false
}, },
deactivated() {
this.viewer.canRequestAnimationFrame = false
},
activated() {
try {
this.viewer.canRequestAnimationFrame = true
this.viewer.reInit()
} catch (e) {
rconsole.error(e)
}
/* 开启渲染*/
},
data() { data() {
return { return {
xzjj: true,
flowDirection: true,
flowPieData: '',
/* 流向数据*/
allPieData: [],
selectedModel: { selectedModel: {
name: '' name: ''
}, },
...@@ -125,11 +171,130 @@ ...@@ -125,11 +171,130 @@
/* 模型加载器*/ /* 模型加载器*/
modelLoader: null, modelLoader: null,
/* */ /* */
reMaterialQue: [] reMaterialQue: [],
allFlowObject: []
} }
}, },
watch: {
flowDirection() {
if (this.allFlowObject) {
this.allFlowObject.forEach((item) => {
item.reverseMapRotation();
});
}
}
},
methods: { methods: {
/* 解决com和 相机控制器事件冲突的问题*/
canNotMousedown(domList) {
domList.forEach(vdom => {
vdom.addEventListener('mousedown', function(event) {
event.preventDefault();
});
})
},
flowPieDataChange(val) {
this.handlerAllFlow()
},
/* 绘制流动方法
*/
handlerAllFlow() {
if (this.allFlowObject.length) {
this.allFlowObject.forEach((item) => {
item.removeFromParent();
});
this.allFlowObject = [];
}
const children = this.allPieData.find((item) => item.name === this.flowPieData)?.children;
if (!children) {
return;
}
children.forEach((item) => {
if (item.data.length >= 2) {
const o = this.drawPipe(
item.data.map((item) => [item.x, item.y, item.z]),
item.radius,
this.flowDirection,
);
o.traverse((node) => {
if (node.isMesh) {
node._thing_tag = "helper";
}
});
this.allFlowObject.push(o);
const box = new THREE.Box3();
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)
}
});
},
/* 获取流向数据*/
getData() {
fetch(`/data.json?${new Date().getTime()}`)
.then(response => {
if (!response.ok) {
throw new Error('网络响应错误');
} else {
return response.json()
}
}).then(data => {
this.allPieData = data.filter((item) => {
return item.children.some((child) => child.data.length >= 2);
});
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)
);
const flowObject = new VT.TubeLine({
points: points,
geometry: {
radius: radius / 100 / 2,
cornerRadius: 0,
cornerSplit: 10,
},
material: {
// color: "#0099ff",
color: "lightgreen",
side: 2,
map: {
image: "vt/resources/texture/arrow.png",
repeat: [1, 4],
// rotation: direction ? Math.PI : 0,
wrapS: THREE.RepeatWrapping,
wrapT: THREE.RepeatWrapping,
},
transparent: true,
depthTest: true,
},
});
flowObject.line.onBeforeRender = () => {
if (flowObject.line.material.map) {
flowObject.line.material.map.offset.x -= 0.05;
}
};
flowObject.traverse((node) => {
if (node.isMesh) {
node._thing_tag = "helper";
}
});
viewer.scene.add(flowObject);
return flowObject;
},
clearSelected() { clearSelected() {
// this.viewer.scene.traverse(function(obj) { // this.viewer.scene.traverse(function(obj) {
// console.log(obj,'模型对象') // console.log(obj,'模型对象')
...@@ -163,8 +328,8 @@ ...@@ -163,8 +328,8 @@
}, },
init() { init() {
this.viewer = new Viewer('container', this) this.viewer = new Viewer('container')
this.viewer.camera.position.set(0, 32, -82) this.viewer.camera.position.set(0, 17, -60)
const manager = new THREE.LoadingManager(); const manager = new THREE.LoadingManager();
manager.onProgress = (item, loaded, total) => { manager.onProgress = (item, loaded, total) => {
...@@ -188,7 +353,7 @@ ...@@ -188,7 +353,7 @@
lights.addDirectionalLight([200, 200, 200], { lights.addDirectionalLight([200, 200, 200], {
color: 'rgb(253,253,253)', color: 'rgb(253,253,253)',
intensity: 3, intensity: 3,
castShadow: true // 是否投射阴影 castShadow: false // 是否投射阴影
}) })
// this.viewer.addAxis() // this.viewer.addAxis()
/* 添加地面*/ /* 添加地面*/
...@@ -235,12 +400,17 @@ ...@@ -235,12 +400,17 @@
// TODO: 第一个参数是否需要指定模型 // TODO: 第一个参数是否需要指定模型
const intersects = rayCaster.intersectObject(this.viewer.scene, true) // 计算物体和射线的焦点 const intersects = rayCaster.intersectObject(this.viewer.scene, true) // 计算物体和射线的焦点
if (intersects[0]) { if (intersects[0]) {
console.log(intersects[0])
if (intersects[0].object.name == '地面') { if (intersects[0].object.name == '地面') {
return return
} }
const model = intersects[0].object let model
if (intersects[0].object.name == '') {
model = intersects[1].object
} else {
model = intersects[0].object
}
this.selectedModel = model this.selectedModel = model
/* 执行并情况材料队列 */ /* 执行并情况材料队列 */
this.reMaterialQue.forEach(item => { this.reMaterialQue.forEach(item => {
...@@ -267,10 +437,13 @@ ...@@ -267,10 +437,13 @@
wireframe: false, wireframe: false,
}) })
/* */ /* */
if (this.xzjj) {
let point = intersects[0].point let point = intersects[0].point
let finallyPoint = this.getCameraPosition(24, 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)
}
} }
}) })
...@@ -325,11 +498,11 @@ ...@@ -325,11 +498,11 @@
let coldy = this.viewer.controls.target.y let coldy = this.viewer.controls.target.y
let coldz = this.viewer.controls.target.z let coldz = this.viewer.controls.target.z
let viewer = this.viewer let viewer = this.viewer
console.log(coldx, coldy, coldz)
/* 计算过渡差值*/ /* 计算过渡差值*/
let tl = gsap.timeline(); let tl = gsap.timeline();
tl.to({}, { tl.to({}, {
duration: 2, // 动画持续时间 duration: 1.5, // 动画持续时间
ease: "power1.inOut", // 缓动函数 ease: "power1.inOut", // 缓动函数
onUpdate: function() { onUpdate: function() {
let progress = this.progress(); // 获取当前进度（0到1之间） let progress = this.progress(); // 获取当前进度（0到1之间）
...@@ -350,6 +523,36 @@ ...@@ -350,6 +523,36 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .el-switch__core {
height: 16px;
}
::v-deep .el-switch__core::after {
height: 12px;
}
::v-deep .el-switch__label {
color: #fff;
}
::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 { .nullbp {
border: 0; border: 0;
padding: 0; padding: 0;
...@@ -395,6 +598,20 @@ ...@@ -395,6 +598,20 @@
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
min-width: 250px; min-width: 250px;
color: #fff;
font-size: 12px;
// background-color: #07417a;
}
.toolButton2 {
display: flex;
margin-top: 18px;
position: absolute;
left: 100px;
z-index: 12;
height: 40px;
line-height: 40px;
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