Skip to content

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

调整

parent 3f9d7a5d
Hide whitespace changes
Inline Side-by-side
Showing with 864 additions and 818 deletions
src/views/yhlywsytst/yhlywsytst/index.vue
View file @ 999317f7
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Description: * @Description:
* @Author: lisu lisu@gavelinfo.com * @Author: lisu lisu@gavelinfo.com
* @LastEditors: lisu lisu@gavelinfo.com * @LastEditors: lisu lisu@gavelinfo.com
* @LastEditTime: 2024-09-25 16:20:23 * @LastEditTime: 2024-09-25 18:00:01
* @FilePath: /zghywpc-vue/src/views/yhlywsytst/yhlywsytst/index.vue * @FilePath: /zghywpc-vue/src/views/yhlywsytst/yhlywsytst/index.vue
--> -->
<template> <template>
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
<div class="flex1 text-center "> <div class="flex1 text-center ">
名称 名称
</div> </div>
<!-- <div class="flex1 text-center "> <!-- <div class="flex1 text-center ">
机组 机组
</div> --> </div> -->
<div class="flex1 text-center "> <div class="flex1 text-center ">
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
v-for="item in lbjlistData"> v-for="item in lbjlistData">
<div class="flex1" style="color: #68D8FE ;" v-text="item.code"></div> <div class="flex1" style="color: #68D8FE ;" v-text="item.code"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.name"></div> <div class="flex1" style="color: #68D8FE ;" v-text="item.name"></div>
<!-- <div class="flex1" style="color: #68D8FE ;" v-text="item.jzbm"></div> --> <!-- <div class="flex1" style="color: #68D8FE ;" v-text="item.jzbm"></div> -->
<div class="flex1" style="color: #68D8FE ;" v-text="item.gg"></div> <div class="flex1" style="color: #68D8FE ;" v-text="item.gg"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.czs"></div> <div class="flex1" style="color: #68D8FE ;" v-text="item.czs"></div>
</div> </div>
...@@ -219,7 +219,7 @@ ...@@ -219,7 +219,7 @@
</div> </div>
</div> </div>
<!-- <div class="flex1" style="height: 33%;overflow: hidden;"> <!-- <div class="flex1" style="height: 33%;overflow: hidden;">
<div class="full"> <div class="full">
<div class="mktitle"> <div class="mktitle">
<span>异物信息</span> <span>异物信息</span>
...@@ -279,9 +279,9 @@ ...@@ -279,9 +279,9 @@
<span>溯源排查</span> <span>溯源排查</span>
<b class="data-title-right">]</b> <b class="data-title-right">]</b>
</div> </div>
<div class="full " style="height: calc(100% - 14px);padding-top: 12px;padding-left: 50px;"> <div class="full " style="height: calc(100% - 14px);padding-top: 12px;padding-left: 25px;">
<el-row :gutter="20" class="search-row-1" style="width: 100%;"> <el-row :gutter="20" class="search-row-1" style="width: 100%;">
<el-col :span="4" class="search-col"> <el-col :span="3" class="search-col">
<div class="search-item"> <div class="search-item">
<span class="search-span"><span style="color: rgb(255, 73, 73); margin-right: 4px;">*</span>功能位置:</span> <span class="search-span"><span style="color: rgb(255, 73, 73); margin-right: 4px;">*</span>功能位置:</span>
<el-input v-model="sypcQueryParams.gnwz"></el-input> <el-input v-model="sypcQueryParams.gnwz"></el-input>
...@@ -316,27 +316,33 @@ ...@@ -316,27 +316,33 @@
<el-input v-model="sypcQueryParams.cz"></el-input> <el-input v-model="sypcQueryParams.cz"></el-input>
</div> </div>
</el-col> </el-col>
<el-col :span="4" class="search-col flex-center"> <el-col :span="3" class="search-col flex-center">
<div class="search-item"> <div class="search-item">
<span class="search-span">流动特性:</span> <span class="search-span">流动特性:</span>
<RelSelect placeholder='' style="width: 100%;" src='ywxxgl/uywxx/init/ldtx ' filterable clearable <RelSelect placeholder='' style="width: 100%;" src='ywxxgl/uywxx/init/ldtx ' filterable clearable
:match="{value:'id',label:'name'}" v-model='sypcQueryParams.ldtx'></RelSelect> :match="{value:'id',label:'name'}" v-model='sypcQueryParams.ldtx'></RelSelect>
</div> </div>
</el-col> </el-col>
<!-- <el-col :span="2" class="search-col flex-center"> <!-- <el-col :span="2" class="search-col flex-center">
</el-col> --> </el-col> -->
<el-col :span="2" class="search-col flex-center" style="padding-left: 20px;"> <el-col :span="2" class="search-col flex-center" style="padding-left: 20px;">
<el-button style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;" <el-button style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;"
size="mini" @click="sypc()" type="primary">溯源排查</el-button> size="mini" @click="sypc()" type="primary">溯源排查</el-button>
</el-col>
<el-col :span="2" class="search-col flex-center" style="padding-left: 20px;">
<el-button style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;"
size="mini" @click="czmx()" type="primary">重置模型</el-button>
</el-col>
<el-col :span="2" class="search-col flex-center" style="padding-left: 20px;">
<el-button @click="savePdf()" style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;"
size="mini" type="primary">溯源日志</el-button>
</el-col> </el-col>
<el-col :span="2" class="search-col flex-center" style="padding-right: 10px;" >
<el-button style="background-color: rgba(7,32,96,0.0);border: 1px solid #68D8FE; color: #68D8FE;"
size="mini" @click="czmx()" type="primary">重置模型</el-button>
</el-col>
</el-row> </el-row>
<!-- <!--
<el-row :gutter="24" class="search-row-1" style="width: 100%;"> <el-row :gutter="24" class="search-row-1" style="width: 100%;">
<el-col :span="20" class="search-col"> <el-col :span="20" class="search-col">
...@@ -506,6 +512,8 @@ ...@@ -506,6 +512,8 @@
}, },
data() { data() {
return { return {
/* pdf-*/
pdfBytes:'',
mxbshow: false, mxbshow: false,
sblxCode: '', sblxCode: '',
sblxcxwcxdxx: false, sblxcxwcxdxx: false,
...@@ -618,7 +626,44 @@ ...@@ -618,7 +626,44 @@
this.apiJzbm() this.apiJzbm()
}, },
/* 点击按钮弹出异物，然后选中*/ /* 点击按钮弹出异物，然后选中*/
savePdf(){
if( this.pdfBytes){
const base64String = this.pdfBytes;
const linkSource = `data:application/pdf;base64,${base64String}`;
const downloadLink = document.createElement('a');
const fileName = '排除日志.pdf';
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();
downloadLink.remove()
}else{
this.$warning('请溯源后,再保存为排除日志')
}
},
sypcMethods(res) { sypcMethods(res) {
// function byteStringToUint8Array(byteString) {
// const byteArray = new Uint8Array(byteString.length);
// for (let i = 0; i < byteString.length; i++) {
// byteArray[i] = byteString.charCodeAt(i);
// }
// return byteArray;
// }
// let byteArray =byteStringToUint8Array(res.data.records.pdfBytes)
// const blob = new Blob([byteArray], { type: 'application/pdf' });
// const url = URL.createObjectURL(blob);
// const a = document.createElement('a');
// a.href = url;
// a.download = 'document.pdf'; // 设置下载文件名
// // 触发下载
// document.body.appendChild(a);
// a.click();
// a.remove()
this.pdfBytes=res.data.records.pdfBytes
/* -
-*/
let sbxxList = res.data.records.kshSbInfos || [] let sbxxList = res.data.records.kshSbInfos || []
let zbInfos = res.data.records.zbInfos || [] let zbInfos = res.data.records.zbInfos || []
/* 进行标记设备*/ /* 进行标记设备*/
...@@ -643,743 +688,202 @@ ...@@ -643,743 +688,202 @@
/* 分割，在渲染高亮清空选中的*/ /* 分割，在渲染高亮清空选中的*/
this.viewer.scene.traverse((model) => { this.viewer.scene.traverse((model) => {
if (model.isMesh) { if (model.isMesh) {
let isbh = false let isbh = false
sbxxCodeList.forEach(item => { sbxxCodeList.forEach(item => {
if (model.name.includes(item)) { if (model.name.includes(item)) {
isbh = true isbh = true
}})
if (isbh) {
model.visible = true
let jzReMaterialQueItem = {
model,
material: model.oldmaterial.clone(),
revert: function() {
this.model.material = this.material
}
}
this.jzReMaterialQue.push(jzReMaterialQueItem)
model.material = new THREE.MeshPhongMaterial({
color: new THREE.Color('rgba(255, 164, 7, 0.8)'),
transparent: true,
opacity: 0.8,
wireframe: false,
})
} else {
/* 隐藏其他设备*/
if (model.name && model.name != '地面') {
model.visible = false
}
}
}
});
/* 显示展示全部按钮*/
this.mxbshow = true
/* 匹配展示数据和本地数据*/
if (this.jzReMaterialQue.length != 0) {
this.viewer.cameraControl.fitTo(this.jzReMaterialQue[0].model);
this.sylbshow = true
this.clickTag(this.jzReMaterialQue[0].model.name)
} else {
this.sylbshow = false
}
// if (sbxxList.length > 0 && (this.jzReMaterialQue.length != sbxxList.length)) {
// this.$warning('存在与模型数据不匹配的数据!')
// }
/* 绘制全部流向*/
this.allPieData = zbInfos.filter((item) => {
return item.children.some((child) => child.data.length >= 2);
});
/* 绘制全部信息*/
if (this.allFlowObject.length) {
this.allFlowObject.forEach((item) => {
item.removeFromParent();
});
this.allFlowObject = [];
}
let flowPieDatas = this.allPieData
flowPieDatas.forEach(flowPieData => {
const children = this.allPieData.find((item) => item.name === flowPieData.name)?.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));
});
o.points.forEach((item) => {
box.expandByPoint(new THREE.Vector3(...item));
});
}
});
})
},
sypc() {
if (!this.sypcQueryParams.gnwz) {
this.$warning('请输入功能位置后进行查询!')
return
}
/* 先清空 选中的机组*/
this.jzReMaterialQue.forEach(item => {
item.revert()
}) })
this.jzReMaterialQue.splice(0, this.jzReMaterialQue.length)
this.loading = true
this.loadingText = '正在处理,请稍等。'
if (this.sypcQueryParams.isrRecentImport !== '') {
if (isbh) {
this.$post('ksh/check/workOrder', model.visible = true
this.sypcQueryParams let jzReMaterialQueItem = {
).then(res => { model,
if (res.success) { material: model.oldmaterial.clone(),
/* 获取加载数据*/ revert: function() {
this.sypcMethods(res) this.model.material = this.material
}
}).finally(() => {
this.loading = false
})
}
/* 另外一个接口*/
else {
this.$post('ksh/query',
this.sypcQueryParams
).then(res => {
if (res.success) {
this.sypcMethods(res)
} }
}).finally(() => { }
this.loading = false this.jzReMaterialQue.push(jzReMaterialQueItem)
model.material = new THREE.MeshPhongMaterial({
color: new THREE.Color('rgba(255, 164, 7, 0.8)'),
transparent: true,
opacity: 0.8,
wireframe: false,
}) })
}
},
getFirstPartOfString(str) {
// 查找"-"在字符串中的位置
const dashIndex = str.indexOf('-');
// 如果找到了"-"，则返回"-"之前的部分（包含起始位置，不包含结束位置）
if (dashIndex !== -1) {
return str.substring(0, dashIndex);
}
// 如果没有找到"-"，则返回整个字符串
return str;
},
apiGetLbjxx() {
this.$post('sbgl/usbxx/query', {
kshSbxxCode: this.getFirstPartOfString(this.selectedModel.name),
}).then(res => {
this.lbjlistData = res.data.records || []
})
},
apiGetYwxx() {
this.$post('ywxxgl/uywxx/query', {
sbxxCode: this.getFirstPartOfString(this.selectedModel.name),
}).then(res => {
this.ywlistData = res.data.records || []
})
},
apiGetJxxx() {
this.$post('jxgl/usbjx/query', {
sbxxCode: this.getFirstPartOfString(this.selectedModel.name),
}).then(res => {
this.jxlistData = res.data.records || []
})
},
apiGetBgxx() {
this.$post('sbgl/usbbg/query', {
sbxxCode: this.getFirstPartOfString(this.selectedModel.name),
}).then(res => {
this.bglistData = res.data.records || []
})
},
/**
* @description:选中标签后操作
* @param {String} code
* @return {*}
* @author: lisu
*/
clickTag(code) {
if (!code) {
return
} else { } else {
this.sbxxQueryParams.code = code.replace(/\s+/g, ''); /* 隐藏其他设备*/
/* 查询*/ if (model.name && model.name != '地面') {
let iscx = false model.visible = false
this.viewer.scene.traverse((model) => {
if (model.isMesh) {
if (model.name == this.sbxxQueryParams.code) {
this.selectedModel = model
iscx = true
/* 执行并情况材料队列 */
this.reMaterialQue.forEach(item => {
item.revert()
})
this.reMaterialQue.splice(0, this.reMaterialQue.length)
/* 添加材质模型队列*/
let reMaterialQueItem = {
model,
material: model.material.clone(),
revert: function() {
this.model.material = this.material
}
}
this.reMaterialQue.push(reMaterialQueItem)
model.material = new THREE.MeshPhongMaterial({
color: new THREE.Color('rgba(255, 255, 0, 0.8)'),
transparent: true,
opacity: 0.8,
wireframe: false,
})
/* */
if (this.xzjj) {
const object = model;
if (object) {
this.viewer.cameraControl.fitTo(object);
}
}
}
}
});
if (iscx == false) {
this.sbcxwcxdxx = true
this.sbcxwcxdxxText = '未查询到设备!'
setTimeout(() => {
this.sbcxwcxdxx = false
}, 2000)
} }
} }
}, }
/** });
* @description:查询流向信息，没有查询所有 /* 显示展示全部按钮*/
* @return {*} this.mxbshow = true
* @author: lisu /* 匹配展示数据和本地数据*/
*/ if (this.jzReMaterialQue.length != 0) {
sblxcx() { this.viewer.cameraControl.fitTo(this.jzReMaterialQue[0].model);
if (true) { this.sylbshow = true
this.sblxCode = this.sblxCode.replace(/\s+/g, ''); this.clickTag(this.jzReMaterialQue[0].model.name)
/* 查询*/ } else {
this.$post('sbgl/usblxgx/zbInfo', { this.sylbshow = false
sbxxCode: this.sblxCode }
}).then(res => { // if (sbxxList.length > 0 && (this.jzReMaterialQue.length != sbxxList.length)) {
if (res.success) { // this.$warning('存在与模型数据不匹配的数据!')
let data = res.data.records || [] // }
if (res.data.records.length == 0) { /* 绘制全部流向*/
this.sblxcxwcxdxx = true this.allPieData = zbInfos.filter((item) => {
this.sblxcxwcxdxxText = '未查询到流向!' return item.children.some((child) => child.data.length >= 2);
setTimeout(() => { });
this.sblxcxwcxdxx = false /* 绘制全部信息*/
}, 2000) if (this.allFlowObject.length) {
} else { this.allFlowObject.forEach((item) => {
item.removeFromParent();
}
this.allPieData = data.filter((item) => {
return item.children.some((child) => child.data.length >= 2);
});
if (res.data.records.length != 0) {
this.$success(`共查询到${res.data.records.length }条数据!共绘制${this.allPieData.length}条流向!`)
}
}
})
}
},
sbcx() {
if (!this.sbxxQueryParams.code) {
this.sbcxwcxdxx = true
this.sbcxwcxdxxText = '请输入设备编码!'
setTimeout(() => {
this.sbcxwcxdxx = false
}, 2000)
} else {
this.sbxxQueryParams.code = this.sbxxQueryParams.code.replace(/\s+/g, '');
/* 查询*/
let iscx = false
this.viewer.scene.traverse((model) => {
if (model.isMesh) {
if (model.name == this.sbxxQueryParams.code) {
this.selectedModel = model
iscx = true
/* 执行并情况材料队列 */
this.reMaterialQue.forEach(item => {
item.revert()
})
this.reMaterialQue.splice(0, this.reMaterialQue.length)
/* 添加材质模型队列*/
let reMaterialQueItem = {
model,
material: model.material.clone(),
revert: function() {
this.model.material = this.material
}
}
this.reMaterialQue.push(reMaterialQueItem)
model.material = new THREE.MeshPhongMaterial({
color: new THREE.Color('rgba(255, 255, 0, 0.8)'),
transparent: true,
opacity: 0.8,
wireframe: false,
})
/* */
if (this.xzjj) {
const object = model;
if (object) {
this.viewer.cameraControl.fitTo(object);
}
} });
} this.allFlowObject = [];
}
let flowPieDatas = this.allPieData
flowPieDatas.forEach(flowPieData => {
const children = this.allPieData.find((item) => item.name === flowPieData.name)?.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";
} }
}); });
if (iscx == false) { this.allFlowObject.push(o);
this.sbcxwcxdxx = true const box = new THREE.Box3();
this.sbcxwcxdxxText = '未查询到设备!' o.points.forEach((item) => {
setTimeout(() => { box.expandByPoint(new THREE.Vector3(...item));
this.sbcxwcxdxx = false });
}, 2000) o.points.forEach((item) => {
box.expandByPoint(new THREE.Vector3(...item));
});
}
} }
});
})
},
sypc() {
if (!this.sypcQueryParams.gnwz) {
this.$warning('请输入功能位置后进行查询!')
return
}
/* 先清空 选中的机组*/
this.jzReMaterialQue.forEach(item => {
item.revert()
})
this.jzReMaterialQue.splice(0, this.jzReMaterialQue.length)
}, this.loading = true
/* 弃用*/ this.loadingText = '正在处理,请稍等。'
apiJzbm() {
let params = _.cloneDeep(this.queryParams)
delete params.sbxxCode
/* 先清空 选中的机组*/
this.jzReMaterialQue.forEach(item => {
item.revert()
})
this.jzReMaterialQue.splice(0, this.jzReMaterialQue.length)
this.$post('ksh/query',
params
).then(res => {
if (res.success) {
let sbxxList = res.data.records || []
this.$success(`已标记${sbxxList.length}个设备`)
const sbxxCodeList = sbxxList.map(item => item.sbxxCode)
/* 解决 先缓存选中色，后渲染黄色，默认选中时颜色不对
bug: 1默认还原为原色
2.高亮为黄色触发默认选中(黄色存储在另一个队列)
3.默认选中会还原上一个颜色
4.还原为原色，触发选中。变为选中色，清除为原色，覆盖了亮色
*/
if (sbxxCodeList.length != 0) {
this.reMaterialQue.forEach(item => {
item.revert()
})
}
this.reMaterialQue.splice(0, this.reMaterialQue.length)
/* 分割，在渲染高亮清空选中的*/
this.viewer.scene.traverse((model) => {
if (model.isMesh) {
if (sbxxCodeList.includes(model.name)) {
let jzReMaterialQueItem = {
model,
material: model.oldmaterial.clone(),
revert: function() {
this.model.material = this.material
}
}
this.jzReMaterialQue.push(jzReMaterialQueItem)
model.material = new THREE.MeshPhongMaterial({
color: new THREE.Color('rgba(255, 164, 7, 0.8)'),
transparent: true,
opacity: 0.8,
wireframe: false,
})
}
}
});
if (this.jzReMaterialQue.length != 0) {
this.viewer.cameraControl.fitTo(this.jzReMaterialQue[0].model);
this.sylbshow = true
this.clickTag(this.jzReMaterialQue[0].model.name)
} else {
this.sylbshow = false
}
// if (sbxxList.length > 0 && (this.jzReMaterialQue.length != sbxxList.length)) {
// this.$warning('存在与模型数据不匹配的数据!')
// }
}
})
},
/* 解决com和 相机控制器事件冲突的问题*/
canNotMousedown(domList) {
domList.forEach(vdom => {
vdom.addEventListener('mouseover', function(event) {
event.preventDefault();
});
})
},
flowPieDataChange(val) {
this.handlerAllFlow()
},
/* 绘制流动方法
if (this.sypcQueryParams.isrRecentImport !== '') {
*/
handlerAllFlow() {
if (this.allFlowObject.length) {
this.allFlowObject.forEach((item) => {
item.removeFromParent();
}); this.$post('ksh/check/workOrder',
this.allFlowObject = []; this.sypcQueryParams
} ).then(res => {
const children = this.allPieData.find((item) => item.name === this.flowPieData)?.children; if (res.success) {
if (!children) { /* 获取加载数据*/
return; this.sypcMethods(res)
} }
children.forEach((item) => { }).finally(() => {
if (item.data.length >= 2) { this.loading = false
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));
});
o.points.forEach((item) => {
box.expandByPoint(new THREE.Vector3(...item));
});
this.viewer.cameraControl.control.fitToBox(box, true, {
cover: true
});
}
});
},
/* 获取流向数据*/
getData() {
this.$post('sbgl/usblxgx/zbInfo', {}).then(res => {
if (res.success) {
let data = res.data.records || []
this.allPieData = data.filter((item) => {
return item.children.some((child) => child.data.length >= 2);
});
/* 绘制全部信息*/
// if (this.allFlowObject.length) {
// this.allFlowObject.forEach((item) => {
// item.removeFromParent();
// });
// this.allFlowObject = [];
// }
// let flowPieDatas=this.allPieData
// flowPieDatas.forEach(flowPieData=>{
// const children = this.allPieData.find((item) => item.name === flowPieData.name)?.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));
// });
// o.points.forEach((item) => {
// box.expandByPoint(new THREE.Vector3(...item));
// });
// }
// });
// })
/* 绘制全部流向操作结束 */
}
})
},
/* 流向动画*/
drawPipe(positions, radius, direction) {
const viewer = this.viewer;
const points = positions.map(
/* 根据本身的模型定位来*/
(item) => new THREE.Vector3(item[0] / 1000, item[2] / 1000, -item[1] / 1000)
);
const flowObject = new VT.TubeLine({
points: points,
geometry: {
radius: radius / 1000 / 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() {
// this.viewer.scene.traverse(function(obj) {
// console.log(obj,'模型对象')
// if (obj.isMesh) {
// obj.material = new THREE.MeshPhysicalMaterial({
// clearcoat: 1.0, //物体表面清漆层或者说透明涂层的厚度
// clearcoatRoughness: 0.1, //透明涂层表面的粗糙度
// color: obj.material.color, //默认颜色
// metalness: 0.9, //车外壳金属度
// roughness: 0.5, //车外壳粗糙度
// envMapIntensity: 2.5, //环境贴图对Mesh表面影响程度
// })
// }
// })
this.selectedModel = { }
name: '' /* 另外一个接口*/
else {
this.$post('ksh/query',
this.sypcQueryParams
).then(res => {
if (res.success) {
this.sypcMethods(res)
} }
this.reMaterialQue.forEach(item => { }).finally(() => {
item.revert() this.loading = false
}) })
},
viewCenter() {
this.cameraTo(this.viewer.camera.position.x, this.viewer.camera.position.y, this.viewer.camera.position.z,
0, 0,
0)
},
reView() {
this.cameraTo(0, 32, -82, 0, 0, 0)
}, }
init() {
/* scene*/
// this.scene = new Viewer('scene')
// this.scene.camera.position.set(0, 17, -60)
/* viewer*/
// this.viewer = new Viewer('container')
// this.viewer.camera.position.set(0, 17, -60)
// const manager = new THREE.LoadingManager();
// manager.onProgress = (item, loaded, total) => {
// let process = (loaded / total * 100).toFixed(2)
// if (process == 100) {
// this.loading = false
// }
// // 这里可以根据加载进度执行其他操作
// };
// this.modelLoader = new ModelLoader(this.viewer, manager)
// const lights = new Lights(this.viewer)
// const ambientLight = lights.addAmbientLight() // 添加环境光
// ambientLight.setOption({
// color: 0xff0000,
// intensity: 6 // 环境光强度
// })
// ambientLight.light.name = 'AmbientLight'
// // 添加平行光
// lights.addDirectionalLight([200, 200, 200], {
// color: 'rgb(253,253,253)',
// intensity: 3,
// castShadow: false // 是否投射阴影
// })
// this.loadDm()
this.viewer = new VT.Viewer({
container: this.$refs.container,
scene: {
helper: {
grid: {
visible: true,
},
},
background: {
skyboxPath: "dark",
},
},
view: {
position: [44.81080132492321, 48.62916741352805, -75.73966237503983],
center: [48.15565686619112, 5.221820594458009, 5.975771281142078],
far: 10000,
near: 0.1,
aspect: null,
fov: 45,
isOrtho: false,
zoom: 1,
rotation: [-2.6532966628149923, -0.036133545863119475, -3.1224049976510337, "XYZ"],
},
});
},
loadAll() {
var model = new VT.Model({
modelType: "gltf",
src: "/gltf/all.gltf",
})
model.addEventListener("loaded", () => { },
this.loading = false getFirstPartOfString(str) {
this.viewer.scene.traverse(model => { // 查找"-"在字符串中的位置
if (model.isMesh) { const dashIndex = str.indexOf('-');
model.oldmaterial = model.material.clone()
}
})
this.getData() // 如果找到了"-"，则返回"-"之前的部分（包含起始位置，不包含结束位置）
if (dashIndex !== -1) {
return str.substring(0, dashIndex);
}
// 如果没有找到"-"，则返回整个字符串
return str;
},
apiGetLbjxx() {
this.$post('sbgl/usbxx/query', {
kshSbxxCode: this.getFirstPartOfString(this.selectedModel.name),
}).then(res => {
this.lbjlistData = res.data.records || []
})
},
apiGetYwxx() {
this.$post('ywxxgl/uywxx/query', {
sbxxCode: this.getFirstPartOfString(this.selectedModel.name),
}).then(res => {
this.ywlistData = res.data.records || []
})
},
apiGetJxxx() {
this.$post('jxgl/usbjx/query', {
sbxxCode: this.getFirstPartOfString(this.selectedModel.name),
}).then(res => {
this.jxlistData = res.data.records || []
})
},
apiGetBgxx() {
this.$post('sbgl/usbbg/query', {
sbxxCode: this.getFirstPartOfString(this.selectedModel.name),
}).then(res => {
this.bglistData = res.data.records || []
})
},
/**
* @description:选中标签后操作
* @param {String} code
* @return {*}
* @author: lisu
*/
clickTag(code) {
if (!code) {
return
} else {
this.sbxxQueryParams.code = code.replace(/\s+/g, '');
/* 查询*/
let iscx = false
this.viewer.scene.traverse((model) => {
}); if (model.isMesh) {
this.viewer.scene.add(model); if (model.name == this.sbxxQueryParams.code) {
// this.modelLoader.loadModelToScene('/glb/all.glb', (model) => {
// model.object.position.set(-42, -10, 0)
// model.object.scale.set(1, 1, 1)
// model.object.updateMatrixWorld(true);
// console.log(model,'console.log(model)console.log(model)')
// }, (num) => {
// let showNum = num * 100
// if (showNum == 100) {
// this.loadingText = `模型加载完毕,请稍等!`
// /* 机组高亮测试*/
// setTimeout(() => {
// this.apiJzbm()
// }, 2000)
// } else {
// this.loadingText = `正在加载模型${showNum}%!`
// }
// /* */
// })
},
loadDm() {
const geometry = new THREE.PlaneGeometry(1000, 1000, 500, 500); // 创建一个100x100的平面，水平和垂直各10条线
const material = new THREE.LineBasicMaterial({
color: 0x585858,
linewidth: 0.5
});
const grid = new THREE.LineSegments(geometry, material);
grid.rotation.x = -Math.PI / 2; // 旋转网格，使其平铺在x-z平面上
grid.position.y = -18; // 将网格向下移动一点，使其位于底部
grid.name = '地面'
this.viewer.scene.add(grid);
},
/* 点击*/
tdClick() {
this.viewer.renderer.domElement.addEventListener('click', (e) => {
const rayCaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()
mouse.x = (e.offsetX / this.viewer.renderer.domElement.clientWidth) * 2 - 1
mouse.y = -(e.offsetY / this.viewer.renderer.domElement.clientHeight) * 2 + 1
rayCaster.setFromCamera(mouse, this.viewer.camera)
const intersects = rayCaster.intersectObject(this.viewer.scene, true) // 计算物体和射线的焦点
if (intersects[0]) {
if (intersects[0].object.name == '地面') {
return
}
let model
/* 测试判定，实际根据模型实际特征来判定*/
if (intersects[0].object.name == '') {
model = intersects[1].object
} else {
model = intersects[0].object
}
/* 当模型隐藏 不继续触发*/
if (model.visible == false) {
rconsole.log('当前对象已屏蔽')
return
}
this.selectedModel = model this.selectedModel = model
// model.visible=false iscx = true
/* 执行并情况材料队列 */ /* 执行并情况材料队列 */
this.reMaterialQue.forEach(item => { this.reMaterialQue.forEach(item => {
item.revert() item.revert()
...@@ -1395,7 +899,6 @@ ...@@ -1395,7 +899,6 @@
this.model.material = this.material this.model.material = this.material
} }
} }
this.reMaterialQue.push(reMaterialQueItem) this.reMaterialQue.push(reMaterialQueItem)
...@@ -1406,40 +909,80 @@ ...@@ -1406,40 +909,80 @@
wireframe: false, wireframe: false,
}) })
/* */ /* */
// if (this.xzjj) { if (this.xzjj) {
// const object = model;
// if (object) { const object = model;
// this.viewer.cameraControl.fitTo(object); if (object) {
// } this.viewer.cameraControl.fitTo(object);
}
// } }
}
}
});
if (iscx == false) {
this.sbcxwcxdxx = true
this.sbcxwcxdxxText = '未查询到设备!'
setTimeout(() => {
this.sbcxwcxdxx = false
}, 2000)
}
}
},
/**
* @description:查询流向信息，没有查询所有
* @return {*}
* @author: lisu
*/
sblxcx() {
if (true) {
this.sblxCode = this.sblxCode.replace(/\s+/g, '');
/* 查询*/
this.$post('sbgl/usblxgx/zbInfo', {
sbxxCode: this.sblxCode
}).then(res => {
if (res.success) {
let data = res.data.records || []
if (res.data.records.length == 0) {
this.sblxcxwcxdxx = true
this.sblxcxwcxdxxText = '未查询到流向!'
setTimeout(() => {
this.sblxcxwcxdxx = false
}, 2000)
} else {
}
this.allPieData = data.filter((item) => {
return item.children.some((child) => child.data.length >= 2);
});
if (res.data.records.length != 0) {
this.$success(`共查询到${res.data.records.length }条数据!共绘制${this.allPieData.length}条流向!`)
} }
})
},
tdblClick() {
this.viewer.renderer.domElement.addEventListener('dblclick', (e) => {
const rayCaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()
mouse.x = (e.offsetX / this.viewer.renderer.domElement.clientWidth) * 2 - 1
mouse.y = -(e.offsetY / this.viewer.renderer.domElement.clientHeight) * 2 + 1
rayCaster.setFromCamera(mouse, this.viewer.camera)
const intersects = rayCaster.intersectObject(this.viewer.scene, true) // 计算物体和射线的焦点
if (intersects[0]) {
if (intersects[0].object.name == '地面') {
return
}
let model
if (intersects[0].object.name == '') {
model = intersects[1].object
} else {
model = intersects[0].object
}
this.selectedModel = model
}
})
}
},
sbcx() {
if (!this.sbxxQueryParams.code) {
this.sbcxwcxdxx = true
this.sbcxwcxdxxText = '请输入设备编码!'
setTimeout(() => {
this.sbcxwcxdxx = false
}, 2000)
} else {
this.sbxxQueryParams.code = this.sbxxQueryParams.code.replace(/\s+/g, '');
/* 查询*/
let iscx = false
this.viewer.scene.traverse((model) => {
if (model.isMesh) {
if (model.name == this.sbxxQueryParams.code) {
this.selectedModel = model
iscx = true
/* 执行并情况材料队列 */ /* 执行并情况材料队列 */
this.reMaterialQue.forEach(item => { this.reMaterialQue.forEach(item => {
item.revert() item.revert()
...@@ -1455,7 +998,6 @@ ...@@ -1455,7 +998,6 @@
this.model.material = this.material this.model.material = this.material
} }
} }
this.reMaterialQue.push(reMaterialQueItem) this.reMaterialQue.push(reMaterialQueItem)
...@@ -1466,89 +1008,593 @@ ...@@ -1466,89 +1008,593 @@
wireframe: false, wireframe: false,
}) })
/* */ /* */
const object = model; if (this.xzjj) {
if (object) {
this.viewer.cameraControl.fitTo(object); const object = model;
if (object) {
this.viewer.cameraControl.fitTo(object);
}
} }
}
}
});
if (iscx == false) {
this.sbcxwcxdxx = true
this.sbcxwcxdxxText = '未查询到设备!'
setTimeout(() => {
this.sbcxwcxdxx = false
}, 2000)
}
}
},
/* 弃用*/
apiJzbm() {
let params = _.cloneDeep(this.queryParams)
delete params.sbxxCode
/* 先清空 选中的机组*/
this.jzReMaterialQue.forEach(item => {
item.revert()
})
this.jzReMaterialQue.splice(0, this.jzReMaterialQue.length)
this.$post('ksh/query',
params
).then(res => {
if (res.success) {
let sbxxList = res.data.records || []
this.$success(`已标记${sbxxList.length}个设备`)
const sbxxCodeList = sbxxList.map(item => item.sbxxCode)
/* 解决 先缓存选中色，后渲染黄色，默认选中时颜色不对
bug: 1默认还原为原色
2.高亮为黄色触发默认选中(黄色存储在另一个队列)
3.默认选中会还原上一个颜色
4.还原为原色，触发选中。变为选中色，清除为原色，覆盖了亮色
*/
if (sbxxCodeList.length != 0) {
this.reMaterialQue.forEach(item => {
item.revert()
})
}
this.reMaterialQue.splice(0, this.reMaterialQue.length)
/* 分割，在渲染高亮清空选中的*/
this.viewer.scene.traverse((model) => {
if (model.isMesh) {
if (sbxxCodeList.includes(model.name)) {
let jzReMaterialQueItem = {
model,
material: model.oldmaterial.clone(),
revert: function() {
this.model.material = this.material
}
}
this.jzReMaterialQue.push(jzReMaterialQueItem)
model.material = new THREE.MeshPhongMaterial({
color: new THREE.Color('rgba(255, 164, 7, 0.8)'),
transparent: true,
opacity: 0.8,
wireframe: false,
})
}
} }
}) });
if (this.jzReMaterialQue.length != 0) {
this.viewer.cameraControl.fitTo(this.jzReMaterialQue[0].model);
this.sylbshow = true
this.clickTag(this.jzReMaterialQue[0].model.name)
} else {
this.sylbshow = false
}
// if (sbxxList.length > 0 && (this.jzReMaterialQue.length != sbxxList.length)) {
// this.$warning('存在与模型数据不匹配的数据!')
// }
}
})
},
/* 解决com和 相机控制器事件冲突的问题*/
canNotMousedown(domList) {
domList.forEach(vdom => {
vdom.addEventListener('mouseover', 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));
});
o.points.forEach((item) => {
box.expandByPoint(new THREE.Vector3(...item));
});
this.viewer.cameraControl.control.fitToBox(box, true, {
cover: true
});
}
});
},
/* 获取流向数据*/
getData() {
this.$post('sbgl/usblxgx/zbInfo', {}).then(res => {
if (res.success) {
let data = res.data.records || []
this.allPieData = data.filter((item) => {
return item.children.some((child) => child.data.length >= 2);
});
/* 绘制全部信息*/
// if (this.allFlowObject.length) {
// this.allFlowObject.forEach((item) => {
// item.removeFromParent();
// });
// this.allFlowObject = [];
// }
// let flowPieDatas=this.allPieData
// flowPieDatas.forEach(flowPieData=>{
// const children = this.allPieData.find((item) => item.name === flowPieData.name)?.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));
// });
// o.points.forEach((item) => {
// box.expandByPoint(new THREE.Vector3(...item));
// });
// }
// });
// })
/* 绘制全部流向操作结束 */
}
})
},
/* 流向动画*/
drawPipe(positions, radius, direction) {
const viewer = this.viewer;
const points = positions.map(
/* 根据本身的模型定位来*/
(item) => new THREE.Vector3(item[0] / 1000, item[2] / 1000, -item[1] / 1000)
);
const flowObject = new VT.TubeLine({
points: points,
geometry: {
radius: radius / 1000 / 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() {
// this.viewer.scene.traverse(function(obj) {
// console.log(obj,'模型对象')
// if (obj.isMesh) {
// obj.material = new THREE.MeshPhysicalMaterial({
// clearcoat: 1.0, //物体表面清漆层或者说透明涂层的厚度
// clearcoatRoughness: 0.1, //透明涂层表面的粗糙度
// color: obj.material.color, //默认颜色
// metalness: 0.9, //车外壳金属度
// roughness: 0.5, //车外壳粗糙度
// envMapIntensity: 2.5, //环境贴图对Mesh表面影响程度
// })
// }
// })
this.selectedModel = {
name: ''
}
this.reMaterialQue.forEach(item => {
item.revert()
})
},
viewCenter() {
this.cameraTo(this.viewer.camera.position.x, this.viewer.camera.position.y, this.viewer.camera.position.z,
0, 0,
0)
},
reView() {
this.cameraTo(0, 32, -82, 0, 0, 0)
},
init() {
/* scene*/
// this.scene = new Viewer('scene')
// this.scene.camera.position.set(0, 17, -60)
/* viewer*/
// this.viewer = new Viewer('container')
// this.viewer.camera.position.set(0, 17, -60)
// const manager = new THREE.LoadingManager();
// manager.onProgress = (item, loaded, total) => {
// let process = (loaded / total * 100).toFixed(2)
// if (process == 100) {
// this.loading = false
// }
// // 这里可以根据加载进度执行其他操作
// };
// this.modelLoader = new ModelLoader(this.viewer, manager)
// const lights = new Lights(this.viewer)
// const ambientLight = lights.addAmbientLight() // 添加环境光
// ambientLight.setOption({
// color: 0xff0000,
// intensity: 6 // 环境光强度
// })
// ambientLight.light.name = 'AmbientLight'
// // 添加平行光
// lights.addDirectionalLight([200, 200, 200], {
// color: 'rgb(253,253,253)',
// intensity: 3,
// castShadow: false // 是否投射阴影
// })
// this.loadDm()
this.viewer = new VT.Viewer({
container: this.$refs.container,
scene: {
helper: {
grid: {
visible: true,
},
},
background: {
skyboxPath: "dark",
},
},
view: {
position: [44.81080132492321, 48.62916741352805, -75.73966237503983],
center: [48.15565686619112, 5.221820594458009, 5.975771281142078],
far: 10000,
near: 0.1,
aspect: null,
fov: 45,
isOrtho: false,
zoom: 1,
rotation: [-2.6532966628149923, -0.036133545863119475, -3.1224049976510337, "XYZ"],
}, },
/* reMaterialQue 相关操作*/ });
getCameraPosition(d, point) {
// 确保point是一个对象，并且包含x, y, z属性 },
if (!point || typeof point.x !== 'number' || typeof point.y !== 'number' || typeof point.z !== 'number') { loadAll() {
throw new Error('Invalid point object'); var model = new VT.Model({
modelType: "gltf",
src: "/gltf/all.gltf",
})
model.addEventListener("loaded", () => {
this.loading = false
this.viewer.scene.traverse(model => {
if (model.isMesh) {
model.oldmaterial = model.material.clone()
} }
})
// 计算从原点(0,0,0)到模型点的向量 this.getData()
const vector = {
x: point.x - 0,
y: point.y - 0,
z: point.z - 0
};
// 计算向量的长度（模） });
const length = Math.sqrt(vector.x * vector.x + vector.y * vector.y + vector.z * vector.z); this.viewer.scene.add(model);
// this.modelLoader.loadModelToScene('/glb/all.glb', (model) => {
// model.object.position.set(-42, -10, 0)
// model.object.scale.set(1, 1, 1)
// model.object.updateMatrixWorld(true);
// console.log(model,'console.log(model)console.log(model)')
// }, (num) => {
// let showNum = num * 100
// if (showNum == 100) {
// this.loadingText = `模型加载完毕,请稍等!`
// /* 机组高亮测试*/
// setTimeout(() => {
// this.apiJzbm()
// }, 2000)
// } else {
// this.loadingText = `正在加载模型${showNum}%!`
// }
// /* */
// })
},
loadDm() {
const geometry = new THREE.PlaneGeometry(1000, 1000, 500, 500); // 创建一个100x100的平面，水平和垂直各10条线
const material = new THREE.LineBasicMaterial({
color: 0x585858,
linewidth: 0.5
});
const grid = new THREE.LineSegments(geometry, material);
grid.rotation.x = -Math.PI / 2; // 旋转网格，使其平铺在x-z平面上
grid.position.y = -18; // 将网格向下移动一点，使其位于底部
grid.name = '地面'
this.viewer.scene.add(grid);
},
/* 点击*/
tdClick() {
this.viewer.renderer.domElement.addEventListener('click', (e) => {
const rayCaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()
mouse.x = (e.offsetX / this.viewer.renderer.domElement.clientWidth) * 2 - 1
mouse.y = -(e.offsetY / this.viewer.renderer.domElement.clientHeight) * 2 + 1
rayCaster.setFromCamera(mouse, this.viewer.camera)
const intersects = rayCaster.intersectObject(this.viewer.scene, true) // 计算物体和射线的焦点
if (intersects[0]) {
if (intersects[0].object.name == '地面') {
// 如果长度为0（即模型点就是原点），则返回一个错误或默认位置 return
if (length === 0) { }
throw new Error('Model point is at the origin'); let model
/* 测试判定，实际根据模型实际特征来判定*/
if (intersects[0].object.name == '') {
model = intersects[1].object
} else {
model = intersects[0].object
}
/* 当模型隐藏 不继续触发*/
if (model.visible == false) {
rconsole.log('当前对象已屏蔽')
return
} }
this.selectedModel = model
// model.visible=false
// 计算单位向量（将向量除以它的长度） /* 执行并情况材料队列 */
const unitVector = { this.reMaterialQue.forEach(item => {
x: vector.x / length, item.revert()
y: vector.y / length, })
z: vector.z / length this.reMaterialQue.splice(0, this.reMaterialQue.length)
};
// 计算相机位置：模型点位置加上单位向量乘以距离d（但注意，这里我们实际上是将相机放在模型点之后d的位置） /* 添加材质模型队列*/
// 如果想要相机在模型点和原点之间，可以调整d的符号或计算方式 let reMaterialQueItem = {
const cameraPosition = { model,
x: point.x - d * unitVector.x, material: model.material.clone(),
y: point.y - d * unitVector.y, revert: function() {
z: point.z - d * unitVector.z this.model.material = this.material
};
return cameraPosition;
},
/* 封装相机转向方法动画*/
cameraTo(x, y, z, px, py, pz) {
let _camera = this.viewer.cameraControl.camera
let currentPosition = _camera.position.clone();
let oldx = currentPosition.x
let oldy = currentPosition.y
let oldz = currentPosition.z
let coldx = this.viewer.controls.target.x
let coldy = this.viewer.controls.target.y
let coldz = this.viewer.controls.target.z
let viewer = this.viewer
/* 计算过渡差值*/
let tl = gsap.timeline();
tl.to({}, {
duration: 1.5, // 动画持续时间
ease: "power1.inOut", // 缓动函数
onUpdate: function() {
let progress = this.progress(); // 获取当前进度（0到1之间）
_camera.position.set(oldx + (x - oldx) * progress, oldy + (y - oldy) * progress, oldz + (z -
oldz) *
progress);
viewer.controls.target.set(coldx + (px - coldx) * progress, coldy + (py - coldy) * progress,
coldz + (
pz - coldz) * progress)
} }
}); }
this.reMaterialQue.push(reMaterialQueItem)
model.material = new THREE.MeshPhongMaterial({
color: new THREE.Color('rgba(255, 255, 0, 0.8)'),
transparent: true,
opacity: 0.8,
wireframe: false,
})
/* */
// if (this.xzjj) {
// const object = model;
// if (object) {
// this.viewer.cameraControl.fitTo(object);
// }
// }
} }
})
},
tdblClick() {
this.viewer.renderer.domElement.addEventListener('dblclick', (e) => {
const rayCaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()
mouse.x = (e.offsetX / this.viewer.renderer.domElement.clientWidth) * 2 - 1
mouse.y = -(e.offsetY / this.viewer.renderer.domElement.clientHeight) * 2 + 1
rayCaster.setFromCamera(mouse, this.viewer.camera)
const intersects = rayCaster.intersectObject(this.viewer.scene, true) // 计算物体和射线的焦点
if (intersects[0]) {
if (intersects[0].object.name == '地面') {
return
}
let model
if (intersects[0].object.name == '') {
model = intersects[1].object
} else {
model = intersects[0].object
}
this.selectedModel = model
/* 执行并情况材料队列 */
this.reMaterialQue.forEach(item => {
item.revert()
})
this.reMaterialQue.splice(0, this.reMaterialQue.length)
/* 添加材质模型队列*/
let reMaterialQueItem = {
model,
material: model.material.clone(),
revert: function() {
this.model.material = this.material
}
}
this.reMaterialQue.push(reMaterialQueItem)
model.material = new THREE.MeshPhongMaterial({
color: new THREE.Color('rgba(255, 255, 0, 0.8)'),
transparent: true,
opacity: 0.8,
wireframe: false,
})
/* */
const object = model;
if (object) {
this.viewer.cameraControl.fitTo(object);
}
}
})
},
/* reMaterialQue 相关操作*/
getCameraPosition(d, point) {
// 确保point是一个对象，并且包含x, y, z属性
if (!point || typeof point.x !== 'number' || typeof point.y !== 'number' || typeof point.z !== 'number') {
throw new Error('Invalid point object');
}
// 计算从原点(0,0,0)到模型点的向量
const vector = {
x: point.x - 0,
y: point.y - 0,
z: point.z - 0
};
// 计算向量的长度（模）
const length = Math.sqrt(vector.x * vector.x + vector.y * vector.y + vector.z * vector.z);
// 如果长度为0（即模型点就是原点），则返回一个错误或默认位置
if (length === 0) {
throw new Error('Model point is at the origin');
}
// 计算单位向量（将向量除以它的长度）
const unitVector = {
x: vector.x / length,
y: vector.y / length,
z: vector.z / length
};
// 计算相机位置：模型点位置加上单位向量乘以距离d（但注意，这里我们实际上是将相机放在模型点之后d的位置）
// 如果想要相机在模型点和原点之间，可以调整d的符号或计算方式
const cameraPosition = {
x: point.x - d * unitVector.x,
y: point.y - d * unitVector.y,
z: point.z - d * unitVector.z
};
return cameraPosition;
},
/* 封装相机转向方法动画*/
cameraTo(x, y, z, px, py, pz) {
let _camera = this.viewer.cameraControl.camera
let currentPosition = _camera.position.clone();
let oldx = currentPosition.x
let oldy = currentPosition.y
let oldz = currentPosition.z
let coldx = this.viewer.controls.target.x
let coldy = this.viewer.controls.target.y
let coldz = this.viewer.controls.target.z
let viewer = this.viewer
/* 计算过渡差值*/
let tl = gsap.timeline();
tl.to({}, {
duration: 1.5, // 动画持续时间
ease: "power1.inOut", // 缓动函数
onUpdate: function() {
let progress = this.progress(); // 获取当前进度（0到1之间）
_camera.position.set(oldx + (x - oldx) * progress, oldy + (y - oldy) * progress, oldz + (z -
oldz) *
progress);
viewer.controls.target.set(coldx + (px - coldx) * progress, coldy + (py - coldy) * progress,
coldz + (
pz - coldz) * progress)
}
});
} }
} }
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -1715,7 +1761,7 @@ ...@@ -1715,7 +1761,7 @@
margin-top: 185px; margin-top: 185px;
width: 28%; width: 28%;
left: 15px; left: 15px;
height: calc(100% - 205px + 10px) ; height: calc(100% - 205px + 10px);
z-index: 12; z-index: 12;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
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