邓洁 : 隧道模型合并
This commit is contained in:
dengj
@@ -9,14 +9,16 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"axios": "^1.4.0",
|
||||
"echarts": "^5.4.2",
|
||||
"element-plus": "^2.3.5",
|
||||
"js-cookie": "^3.0.5",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.35",
|
||||
"sass": "^1.62.1",
|
||||
"scss": "^0.2.4",
|
||||
"js-cookie": "^3.0.5",
|
||||
"three": "^0.159.0",
|
||||
"unplugin-icons": "^0.16.1",
|
||||
"vite-plugin-inspect": "^0.7.26",
|
||||
"vue": "^3.2.47",
|
||||
|
||||
26207
public/devicesModel/Camera.obj
Normal file
26207
public/devicesModel/Camera.obj
Normal file
File diff suppressed because it is too large
Load Diff
16074
public/devicesModel/box_device.obj
Normal file
16074
public/devicesModel/box_device.obj
Normal file
File diff suppressed because it is too large
Load Diff
119042
public/devicesModel/dev2.obj
Normal file
119042
public/devicesModel/dev2.obj
Normal file
File diff suppressed because it is too large
Load Diff
275869
public/devicesModel/dev3.obj
Normal file
275869
public/devicesModel/dev3.obj
Normal file
File diff suppressed because it is too large
Load Diff
BIN
public/images/camera.jpg
Normal file
BIN
public/images/camera.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
public/tunnelModel/chanel.glb
Normal file
BIN
public/tunnelModel/chanel.glb
Normal file
Binary file not shown.
89
src/assets/styles/tags/index.css
Normal file
89
src/assets/styles/tags/index.css
Normal file
@@ -0,0 +1,89 @@
|
||||
canvas {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#tag {
|
||||
height: 300px;
|
||||
width: 200px;
|
||||
background-color: rgba(236, 236, 236, 0.836);
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
display: block;
|
||||
}
|
||||
#tag2 {
|
||||
height: 300px;
|
||||
width: 200px;
|
||||
background-color: rgba(236, 236, 236, 0.836);
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
#tag3 {
|
||||
height: 300px;
|
||||
width: 200px;
|
||||
background-color: rgba(236, 236, 236, 0.836);
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
.title {
|
||||
height: 20px;
|
||||
}
|
||||
.option-btn {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.divice-list {
|
||||
height: 240px;
|
||||
}
|
||||
.divice-list ul {
|
||||
height: 100%;
|
||||
padding: 7px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
align-content: first baseline;
|
||||
}
|
||||
.divice-list ul li {
|
||||
border-radius: 5px;
|
||||
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#li-active {
|
||||
background: red;
|
||||
}
|
||||
#view {
|
||||
width: 260px;
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
background-color: rgb(246, 248, 250);
|
||||
/* opacity: 0.5; */
|
||||
border-radius: 10px;
|
||||
z-index: 10;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: 5px 5px 0px 0px;
|
||||
padding: 10px;
|
||||
}
|
||||
input {
|
||||
width: 180px;
|
||||
margin: 10px 3px 10px 0px;
|
||||
}
|
||||
40
src/components/HelloWorld.vue
Normal file
40
src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Install
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
|
||||
in your IDE for a better DX
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
85
src/components/content/tunnelScene/TunnelScene.vue
Normal file
85
src/components/content/tunnelScene/TunnelScene.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div id="scene" ref="content">
|
||||
<dev-info ref="info" dev-name="no" dev-state="noState" />
|
||||
<edit-dev ref="edit" @check-dev="handleCheckDev" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as three from "three";
|
||||
import ThreeDScene from "./sceneClass/demo.js";
|
||||
|
||||
// 导入模模型加载器
|
||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||
// import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
|
||||
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
|
||||
import * as TWEEN from "three/examples/jsm/libs/tween.module";
|
||||
import {
|
||||
CSS3DRenderer,
|
||||
CSS3DObject,
|
||||
CSS3DSprite,
|
||||
} from "three/addons/renderers/CSS3DRenderer.js";
|
||||
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
|
||||
|
||||
import DevInfo from "./childComp/DevInfo.vue";
|
||||
import EditDev from "./childComp/EditDev.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
// 获取html标签跟随组件
|
||||
const content = ref(null);
|
||||
const info = ref(null);
|
||||
const edit = ref(null);
|
||||
|
||||
const loader = new OBJLoader();
|
||||
// 模版挂载后
|
||||
onMounted(handleMounted);
|
||||
// 处理回调
|
||||
async function handleMounted() {
|
||||
const doms = [info.value.$el, edit.value.$el];
|
||||
const demo = new ThreeDScene(three, content.value);
|
||||
demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.glb");
|
||||
demo.addOrbitControls(OrbitControls);
|
||||
demo.addTween(TWEEN);
|
||||
demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
|
||||
demo.addOBJLoader(OBJLoader);
|
||||
demo.loadeOBJModel();
|
||||
|
||||
// 初始化设备模型
|
||||
|
||||
try {
|
||||
const deviceList = [];
|
||||
let result = await loadModel("../../../../public/devicesModel/Camera.obj");
|
||||
deviceList.push(result);
|
||||
result = await loadModel("../../../../public/devicesModel/box_device.obj");
|
||||
deviceList.push(result);
|
||||
result = await loadModel("../../../../public/devicesModel/dev2.obj");
|
||||
deviceList.push(result);
|
||||
result = await loadModel("../../../../public/devicesModel/dev3.obj");
|
||||
deviceList.push(result);
|
||||
} catch (e) {}
|
||||
// demo.initDevicesModel();
|
||||
}
|
||||
|
||||
function loadModel(path) {
|
||||
return new Promise((resolve, reject) => {
|
||||
loader.load(
|
||||
path,
|
||||
(obj) => {
|
||||
resolve(obj);
|
||||
},
|
||||
(xhr) => {},
|
||||
(err) => {
|
||||
reject(err);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
#scene {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
</style>
|
||||
35
src/components/content/tunnelScene/childComp/DevInfo.vue
Normal file
35
src/components/content/tunnelScene/childComp/DevInfo.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div id="dev-info">
|
||||
<div class="title">设备属性</div>
|
||||
<div class="name">
|
||||
<span>设备名称:</span><span>{{ devName }}</span>
|
||||
</div>
|
||||
<div class="state-info">
|
||||
<span>设备状态:</span><span>{{ devState }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 接受参数
|
||||
defineProps({
|
||||
devName: String,
|
||||
devState: String,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#dev-info {
|
||||
height: 300px;
|
||||
width: 200px;
|
||||
background-color: rgba(236, 236, 236, 0.836);
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
display: block;
|
||||
.title {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
106
src/components/content/tunnelScene/childComp/EditDev.vue
Normal file
106
src/components/content/tunnelScene/childComp/EditDev.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div id="edit-dev">
|
||||
<div class="title">编辑设备</div>
|
||||
<div class="divice-list">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, key) of devicesList"
|
||||
:key="key"
|
||||
@click="checkDev(key)"
|
||||
>
|
||||
<img :src="item.devImgUrl" />
|
||||
<div>{{ item.devName }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="option-btn">
|
||||
<button @click="removeDev">移除设备</button>
|
||||
<button @click="addDev">添加设备</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, defineEmits, onMounted, ref } from "vue";
|
||||
// 定义需要发射的事件
|
||||
const emit = defineEmits([
|
||||
"initLoadDevicesModel",
|
||||
"checkDev",
|
||||
"addDev",
|
||||
"removeDev",
|
||||
]);
|
||||
onMounted(initDevicesModel);
|
||||
// 挂载后加所有的设备模型
|
||||
function initDevicesModel() {
|
||||
emit("initLoadDevicesModel");
|
||||
}
|
||||
|
||||
const devItem = {
|
||||
devName: "传感器",
|
||||
devImgUrl: "../../../../../public/images/camera.jpg",
|
||||
};
|
||||
const list = [devItem, devItem, devItem, devItem];
|
||||
|
||||
const devicesList = reactive(list);
|
||||
const checkIndex = ref(0);
|
||||
//选择设备
|
||||
function checkDev(key) {
|
||||
checkIndex = key;
|
||||
emit("checkDev", key); //携带参数发射事件
|
||||
}
|
||||
// 添加设备
|
||||
function addDev() {
|
||||
emit("addDev");
|
||||
}
|
||||
//删除设备
|
||||
function removeDev() {
|
||||
emit("removeDev");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#edit-dev {
|
||||
height: 300px;
|
||||
width: 200px;
|
||||
background-color: rgba(236, 236, 236, 0.836);
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
.title {
|
||||
height: 20px;
|
||||
}
|
||||
.option-btn {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.divice-list {
|
||||
height: 240px;
|
||||
}
|
||||
.divice-list ul {
|
||||
height: 100%;
|
||||
padding: 7px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
align-content: first baseline;
|
||||
}
|
||||
.divice-list ul li {
|
||||
border-radius: 5px;
|
||||
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#li-active {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
export function addDev(devId) {
|
||||
if (!this.checkDevId) {
|
||||
alert("请选择设备");
|
||||
return;
|
||||
}
|
||||
const devModel = this.devMap.get(devId).clone();
|
||||
handleLoadedDevice.call(this, devModel);
|
||||
}
|
||||
|
||||
function handleLoadedDevice(model) {
|
||||
if (!this.targetPoint) return;
|
||||
//获取定位位置
|
||||
const wp = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
|
||||
model.position.copy(wp);
|
||||
this.targetPoint.visible = false;
|
||||
|
||||
this.scene.add(model);
|
||||
if (model.name === "camera") {
|
||||
model.translateX(-5);
|
||||
model.translateZ(4);
|
||||
model.translateY(-0.5);
|
||||
}
|
||||
// 添加的信息请求或初始化的信息
|
||||
this.targetPoint.info = {
|
||||
name: "摄像头",
|
||||
state: "未开启",
|
||||
devId: model.id,
|
||||
};
|
||||
this.targetPoint.hasDevice = true;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export function checkDevModel() {}
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
*
|
||||
* @param {Vector3} Vec3 出现位置
|
||||
*/
|
||||
|
||||
export function checkAnimation(Vec3 = new this.THREE.Vector3(), size = 0.3) {
|
||||
// 先清空group
|
||||
if (this.group) {
|
||||
if (Vec3.x === this.group.position.x && Vec3.z === this.group.position.z) {
|
||||
return;
|
||||
}
|
||||
this.scene.remove(this.group);
|
||||
}
|
||||
|
||||
// 创建一个group
|
||||
this.group = new this.THREE.Group();
|
||||
// 创建一个圆柱
|
||||
const cylinder = new this.THREE.CylinderGeometry(0.5, 0.5, 3, 32);
|
||||
const material = new this.THREE.MeshBasicMaterial({ color: "#0dbc79" });
|
||||
const cylinderMesh = new this.THREE.Mesh(cylinder, material);
|
||||
const header = new this.THREE.CylinderGeometry(1, 0.1, 3, 32);
|
||||
const headerMesh = new this.THREE.Mesh(header, material);
|
||||
headerMesh.position.set(0, -3, 0);
|
||||
this.group.add(cylinderMesh, headerMesh);
|
||||
this.group.position.set(Vec3.x, Vec3.y + 2, Vec3.z);
|
||||
|
||||
// 创建动画
|
||||
this.checkAnimationTween = new this.TWEEN.Tween(this.group.position);
|
||||
this.checkAnimationTween.to({ y: this.group.position.y + 1 }, 500);
|
||||
// 循环动画
|
||||
this.checkAnimationTween.repeat(Infinity);
|
||||
this.checkAnimationTween.yoyo(true);
|
||||
this.checkAnimationTween.start();
|
||||
this.group.scale.set(size, size, size);
|
||||
this.scene.add(this.group);
|
||||
}
|
||||
456
src/components/content/tunnelScene/sceneClass/demo.js
Normal file
456
src/components/content/tunnelScene/sceneClass/demo.js
Normal file
@@ -0,0 +1,456 @@
|
||||
import { handleLClick } from "./handleRLclick/handleLclick";
|
||||
import { handleRClick } from "./handleRLclick/handleRclick";
|
||||
import { handleDBLClick } from "./handleDBLclick";
|
||||
import { checkAnimation } from "./checkTag";
|
||||
import {
|
||||
handleEndChange,
|
||||
handleStartChange,
|
||||
} from "./handleOrbitControlsChange";
|
||||
import { saveState, resetState } from "./viewBack";
|
||||
|
||||
import { addDev } from "./addDevice";
|
||||
import { removeDev } from "./removeDevice";
|
||||
import { checkDevModel } from "./checkDevModel";
|
||||
export default class Demo {
|
||||
// 摄像机看向位置
|
||||
origin = null;
|
||||
//附着点的模型
|
||||
points = [];
|
||||
//设备模型数组
|
||||
deviceModels = [];
|
||||
constructor(three, mountedElement) {
|
||||
// 外部引入匿名函数
|
||||
this._handleLClick = handleLClick;
|
||||
this._handleRClick = handleRClick;
|
||||
this._handleDBLClick = handleDBLClick;
|
||||
this._checkAnimation = checkAnimation;
|
||||
this._saveSate = saveState;
|
||||
this._resetState = resetState;
|
||||
this._removeDev = removeDev;
|
||||
|
||||
this.THREE = three;
|
||||
this.mountedElement = mountedElement;
|
||||
//初始化场景
|
||||
this.scene = new this.THREE.Scene();
|
||||
// 初始化摄像机
|
||||
this.camera = new this.THREE.PerspectiveCamera(
|
||||
75,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.1,
|
||||
1000
|
||||
);
|
||||
|
||||
this.camera.position.z = 130;
|
||||
this.camera.position.y = 35;
|
||||
this.camera.position.x = 40;
|
||||
|
||||
this.camera.lookAt(0, 0, 1000);
|
||||
// 初始化渲染器
|
||||
this.renderer = new this.THREE.WebGLRenderer({
|
||||
// 抗锯齿
|
||||
antialias: true,
|
||||
});
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.renderer.domElement.style.position = "absolute";
|
||||
this.mountedElement.appendChild(this.renderer.domElement);
|
||||
// 创建渲染帧
|
||||
this.render = () => {
|
||||
this.__renderScope();
|
||||
requestAnimationFrame(this.render);
|
||||
};
|
||||
this.render();
|
||||
this.canvasResize();
|
||||
this.addXYZ();
|
||||
|
||||
this.HTMLTagEventListener();
|
||||
|
||||
this.bindRightPlaneInfo();
|
||||
}
|
||||
//渲染函数作用域(这里主要写渲染帧内操作)
|
||||
__renderScope() {
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
// 轨道控制器更新
|
||||
if (this.orbitControls) {
|
||||
this.orbitControls.update();
|
||||
}
|
||||
|
||||
// 摄像头移动动画
|
||||
if (this.cameraPositionTween) {
|
||||
this.cameraPositionTween.update();
|
||||
}
|
||||
|
||||
//html标签渲染
|
||||
if (this.CSS2Renderer) {
|
||||
this.CSS2Renderer.render(this.scene, this.camera);
|
||||
}
|
||||
// 选中标签动画渲染
|
||||
if (this.checkAnimationTween) {
|
||||
this.checkAnimationTween.update();
|
||||
}
|
||||
// 视角重置动画
|
||||
if (this.resetViewAngleAnimation) {
|
||||
this.resetViewAngleAnimation.update();
|
||||
}
|
||||
//视角回退动画
|
||||
if (this.viewSateResetAnimation) {
|
||||
this.viewSateResetAnimation.update();
|
||||
}
|
||||
// 视角跟随动画
|
||||
if (this.intoPointAnimation) {
|
||||
this.intoPointAnimation.update();
|
||||
}
|
||||
}
|
||||
|
||||
// 添加世界坐标系
|
||||
addXYZ() {
|
||||
// const axesHelper = new this.THREE.AxesHelper(100);
|
||||
// this.scene.add(axesHelper);
|
||||
}
|
||||
|
||||
// 屏幕自适应
|
||||
canvasResize() {
|
||||
window.addEventListener("resize", () => {
|
||||
this.camera.aspect = window.innerWidth / window.innerHeight;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
});
|
||||
}
|
||||
|
||||
// 模型加载
|
||||
/**
|
||||
* @param {Object} GLTFLoader 模型加载器
|
||||
* @param {String} path 模型资源路径
|
||||
*/
|
||||
loadModel(GLTFLoader, path) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.gltfloader = new GLTFLoader();
|
||||
this.gltfloader.load(
|
||||
"../../../../../public/tunnelModel/chanel.glb",
|
||||
(gltf) => {
|
||||
gltf.scene.traverse((child) => {
|
||||
this._forModels(child);
|
||||
});
|
||||
this.scene.add(gltf.scene);
|
||||
|
||||
// 加载完后可执行函数
|
||||
this._afterLoaded(gltf.scene);
|
||||
resolve(gltf);
|
||||
},
|
||||
(xhr) => {
|
||||
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
|
||||
},
|
||||
(error) => {
|
||||
console.log(error);
|
||||
reject(error);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
// 模型加载完函数
|
||||
_afterLoaded() {
|
||||
// 可以进行选中
|
||||
this._hoverModel(this.points);
|
||||
// 可以进行点击
|
||||
this._ClickModel(this.points);
|
||||
}
|
||||
|
||||
// 在此方法中对模型批量操作
|
||||
_forModels(child) {
|
||||
// 匹配附着点(这里不适合对单个模型进行保存，批量对模型进行操作)
|
||||
if (child.isMesh && /^point+/.test(child.name)) {
|
||||
this.points.push(child);
|
||||
// 改变为基础材质
|
||||
child.material = new this.THREE.MeshBasicMaterial();
|
||||
|
||||
// 遍历一个属性是否存在设备
|
||||
child.hasDevice = false; //初始化
|
||||
}
|
||||
}
|
||||
|
||||
// 添加轨道控制器
|
||||
/**
|
||||
* @param {Object} OrbitControls 轨道控制器
|
||||
*/
|
||||
addOrbitControls(OrbitControls) {
|
||||
this.orbitControls = new OrbitControls(
|
||||
this.camera,
|
||||
this.renderer.domElement
|
||||
);
|
||||
|
||||
//限制轨道控制器的视角变化
|
||||
this.orbitControls.maxPolarAngle = Math.PI * (3 / 5);
|
||||
// 监听控制器变化
|
||||
this.orbitControls.addEventListener("end", handleEndChange.bind(this));
|
||||
this.orbitControls.addEventListener("start", handleStartChange.bind(this));
|
||||
}
|
||||
/**
|
||||
* @param {Class} Tween 添加补间动画
|
||||
*/
|
||||
|
||||
addTween(Tween) {
|
||||
this.TWEEN = Tween;
|
||||
}
|
||||
|
||||
/***
|
||||
* 鼠标移入可以高亮的模型
|
||||
*@param {Array} hoverModels 需要高亮的模型
|
||||
*/
|
||||
_hoverModel(hoverModels) {
|
||||
this.renderer.domElement.addEventListener("mousemove", (e) => {
|
||||
const mouse = new this.THREE.Vector2();
|
||||
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
|
||||
const raycaster = new this.THREE.Raycaster();
|
||||
raycaster.setFromCamera(mouse, this.camera);
|
||||
const intersects = raycaster.intersectObjects(hoverModels);
|
||||
if (intersects.length > 0) {
|
||||
if (!this.preHover) {
|
||||
this.preHover = intersects[0].object;
|
||||
} else {
|
||||
this.preHover.material.color.set("white");
|
||||
this.preHover = intersects[0].object;
|
||||
}
|
||||
|
||||
intersects[0].object.material.color.set("red");
|
||||
const tagP = intersects[0].object.getWorldPosition(
|
||||
new this.THREE.Vector3()
|
||||
);
|
||||
|
||||
this._checkAnimation(tagP);
|
||||
} else {
|
||||
if (!this.preHover) return;
|
||||
this.preHover.material.color.set("white");
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* @param {Array} isClickModels 可以进行点击的模型吧
|
||||
*/
|
||||
_ClickModel(isClickModels) {
|
||||
// 点击两次处理事件
|
||||
this.renderer.domElement.addEventListener(
|
||||
"dblclick",
|
||||
this.__handleListenerDBLClickEvent.bind(this, isClickModels) //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
|
||||
);
|
||||
// 点击一次时处理时间
|
||||
this.renderer.domElement.addEventListener(
|
||||
"mousedown",
|
||||
this.__handleListenerClickRLEvent.bind(this, isClickModels) //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
|
||||
);
|
||||
}
|
||||
// 处理点击2次触发事件事件
|
||||
__handleListenerDBLClickEvent(isClickModels, e) {
|
||||
// 如果监听到双击则清空单次点击事件
|
||||
clearTimeout(this.EventTimer);
|
||||
//最后一个是监听器默认参数
|
||||
const mouse = new this.THREE.Vector2();
|
||||
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
|
||||
const raycaster = new this.THREE.Raycaster();
|
||||
raycaster.setFromCamera(mouse, this.camera);
|
||||
const intersects = raycaster.intersectObjects(isClickModels);
|
||||
// 取消定位的视角返回初始化
|
||||
if (intersects.length === 0) {
|
||||
this.clearTagsObj();
|
||||
this._resetState();
|
||||
return;
|
||||
}
|
||||
// 处理连续双击击事件
|
||||
this._handleDBLClick(intersects[0].object);
|
||||
}
|
||||
|
||||
// 处理点击左右键触发的事件
|
||||
__handleListenerClickRLEvent(isClickModels, e) {
|
||||
clearTimeout(this.EventTimer);
|
||||
this.EventTimer = setTimeout(() => {
|
||||
const mouse = new this.THREE.Vector2();
|
||||
mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
|
||||
const raycaster = new this.THREE.Raycaster();
|
||||
raycaster.setFromCamera(mouse, this.camera);
|
||||
const intersects = raycaster.intersectObjects(isClickModels);
|
||||
if (intersects.length === 0) return;
|
||||
this.setBoxHelper(intersects[0].object);
|
||||
|
||||
// 处理点击左右键事件
|
||||
if (e.button === 0) {
|
||||
this._handleLClick(intersects[0].object);
|
||||
} else if (e.button === 2) {
|
||||
this._handleRClick(intersects[0].object);
|
||||
}
|
||||
}, 400);
|
||||
}
|
||||
|
||||
// 添加css3Renderer
|
||||
addCSS3Renderer(CSS2Renderer, CSS2DObject, [infoDom, editDom]) {
|
||||
this.CSS2Renderer = new CSS2Renderer();
|
||||
this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.CSS2Renderer.render(this.scene, this.camera);
|
||||
|
||||
this.mountedElement.appendChild(this.CSS2Renderer.domElement);
|
||||
|
||||
// 初始化html标签
|
||||
this.tagHtml = infoDom;
|
||||
this.tag2Html = infoDom;
|
||||
this.tag3Html = editDom;
|
||||
this.CSS2DObject = CSS2DObject;
|
||||
// 创建html标签模型
|
||||
this.tagCSS2DObj = new CSS2DObject(this.tagHtml);
|
||||
this.tag2CSS2DObj = new CSS2DObject(this.tag2Html);
|
||||
this.tag3CSS2DObj = new CSS2DObject(this.tag3Html);
|
||||
// 设置该标签初始化透明
|
||||
|
||||
this.tagCSS2DObj.element.style.display = "none";
|
||||
this.tag2CSS2DObj.element.style.display = "none";
|
||||
this.tag3CSS2DObj.element.style.display = "none";
|
||||
this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
|
||||
this.tag2CSS2DObj.scale.set(0.1, 0.1, 0.1);
|
||||
this.tag3CSS2DObj.scale.set(0.1, 0.1, 0.1);
|
||||
|
||||
this.tagCSS2DObj.scale.set(3, 3, 3);
|
||||
}
|
||||
clearTagsObj() {
|
||||
if (this.preDBLModel) {
|
||||
this.preDBLModel.remove(this.tagCSS2DObj);
|
||||
}
|
||||
// 所有标签看不见
|
||||
this.scene.remove(this.tag2CSS2DObj);
|
||||
this.scene.remove(this.tag3CSS2DObj);
|
||||
// 删除标记动画
|
||||
this.scene.remove(this.group);
|
||||
}
|
||||
/**
|
||||
* @param {Array} paths 所有设备模型的路径
|
||||
*/
|
||||
addDeviceModels(paths) {
|
||||
const gltfloader = this.gltfloader;
|
||||
load(paths);
|
||||
function load(paths, current = 0) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// try {
|
||||
gltfloader(paths[current], (deviceModel) => {
|
||||
this.deviceModels.push(deviceModel);
|
||||
current++;
|
||||
console.log(deviceModel);
|
||||
load(paths, current);
|
||||
if (current > paths.length) {
|
||||
resolve("ok");
|
||||
}
|
||||
});
|
||||
// } catch (e) {
|
||||
// reject(new Error("加载异常"));
|
||||
// }
|
||||
});
|
||||
}
|
||||
}
|
||||
// 附着点选中线宽包围
|
||||
setBoxHelper(obj) {
|
||||
// 判断场景是否纯在该3d对象
|
||||
if (this.scene.getObjectByName("boxHelper")) {
|
||||
const preModel = this.scene.getObjectByName("boxHelper");
|
||||
this.scene.remove(preModel);
|
||||
}
|
||||
const boxHelper = new this.THREE.BoxHelper(obj, 0xffff00);
|
||||
boxHelper.name = "boxHelper";
|
||||
this.scene.add(boxHelper);
|
||||
}
|
||||
/**
|
||||
*@param {Class} DRACOLoader 解压器
|
||||
* @param {String} dracoPath 解压器路径
|
||||
*/
|
||||
addDARCOLoder(DRACOLoader, dracoPath) {
|
||||
this.DRAC = new DRACOLoader();
|
||||
this.DRAC.setDecoderPath(dracoPath);
|
||||
//给模型加载器添解压器
|
||||
this.gltfloader.setDRACOLoader(this.DRAC);
|
||||
}
|
||||
|
||||
// 监听tagHTML标签内事件
|
||||
HTMLTagEventListener() {
|
||||
// this.addBtn = document.querySelector("#add-model");
|
||||
// this.removeBtn = document.querySelector("#remove-model");
|
||||
// //开启监听
|
||||
// this.addBtn.addEventListener("click", addDev.bind(this));
|
||||
// this.removeBtn.addEventListener("click", removeDev.bind(this));
|
||||
// //监听选择设备
|
||||
// this.devList = document.querySelector(".divice-list ul");
|
||||
// this.devList.addEventListener("click", checkDevModel.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Meshes} meshes gltf加载过后的模型数组
|
||||
*/
|
||||
initDevicesModel(meshes) {
|
||||
this.deviceList = [];
|
||||
meshes.forEach((mesh) => {
|
||||
this.deviceList.push(mesh);
|
||||
});
|
||||
console.log(this.deviceList);
|
||||
}
|
||||
/**
|
||||
* @param {String} devId 添加的设备ID
|
||||
*/
|
||||
addDevice(devId) {
|
||||
addDev.bind(this, devId);
|
||||
}
|
||||
/**
|
||||
* @param {String} devId 删除的设备ID
|
||||
*/
|
||||
removeDevice(devId) {
|
||||
removeDev.bind(this, devId);
|
||||
}
|
||||
//获取右边面板信息
|
||||
bindRightPlaneInfo() {
|
||||
// this.chanelLengthInput = document.querySelector("#chanel-length-input");
|
||||
// this.aspectValue = document.querySelector("#aspect-length-value");
|
||||
// this.chanelLengthInput.addEventListener("input", (e) => {
|
||||
// // console.log(e.target.value);
|
||||
// });
|
||||
}
|
||||
/**
|
||||
* @param {OBJLoader} objloader 模型加载器
|
||||
*/
|
||||
addOBJLoader(objloader) {
|
||||
this.OBJLoader = new objloader();
|
||||
}
|
||||
// 先把模型加载完成
|
||||
loadeOBJModel() {
|
||||
this.devMap = new Map();
|
||||
this.OBJLoader.load(
|
||||
"../../../../../public/devicesModel/Camera.obj",
|
||||
callBack.bind(this, "dev_1")
|
||||
);
|
||||
this.OBJLoader.load(
|
||||
"../../../../../public/devicesModel/Camera.obj",
|
||||
callBack.bind(this, "dev_2")
|
||||
);
|
||||
this.OBJLoader.load(
|
||||
"../../../../../public/devicesModel/Camera.obj",
|
||||
callBack.bind(this, "dev_3")
|
||||
);
|
||||
this.OBJLoader.load(
|
||||
"../../../../../public/devicesModel/Camera.obj",
|
||||
callBack.bind(this, "camera")
|
||||
);
|
||||
function callBack(param, model) {
|
||||
switch (param) {
|
||||
case "dev_1":
|
||||
model.scale.set(0.2, 0.2, 0.2);
|
||||
break;
|
||||
case "dev_2":
|
||||
model.scale.set(0.2, 0.2, 0.2);
|
||||
break;
|
||||
case "dev_3":
|
||||
model.scale.set(0.1, 0.1, 0.1);
|
||||
break;
|
||||
case "camera":
|
||||
model.scale.set(0.7, 0.7, 0.7);
|
||||
|
||||
model.name = "camera";
|
||||
break;
|
||||
}
|
||||
this.devMap.set(param, model);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
export function handleDBLClick(e) {
|
||||
this._saveSate();
|
||||
// 注意位置不能改变
|
||||
this.clearTagsObj();
|
||||
|
||||
this.preDBLModel = e;
|
||||
//获取模型世界坐标位置
|
||||
const modelP = new this.THREE.Vector3();
|
||||
e.getWorldPosition(modelP);
|
||||
this._checkAnimation(modelP);
|
||||
|
||||
this.setBoxHelper(e);
|
||||
if (/l$/.test(e.name)) {
|
||||
//匹配单个隧道左边附着点
|
||||
modelP.x += 5;
|
||||
modelP.y -= 5;
|
||||
modelP.z += 10;
|
||||
|
||||
this.orbitControls.target = modelP;
|
||||
this.cameraPositionTween = new this.TWEEN.Tween(this.camera.position);
|
||||
this.cameraPositionTween.to(modelP, 400);
|
||||
this.cameraPositionTween.start();
|
||||
|
||||
modelP.x -= 4;
|
||||
modelP.y += 4;
|
||||
modelP.z -= 20;
|
||||
} else if (/r$/.test(e.name)) {
|
||||
//匹配单个隧道右边附着点
|
||||
modelP.x -= 5;
|
||||
modelP.y -= 5;
|
||||
modelP.z += 10;
|
||||
this.orbitControls.target = modelP;
|
||||
this.cameraPositionTween = new this.TWEEN.Tween(this.camera.position);
|
||||
this.cameraPositionTween.to(modelP, 400);
|
||||
this.cameraPositionTween.start();
|
||||
modelP.x += 4;
|
||||
modelP.y += 4;
|
||||
modelP.z -= 20;
|
||||
}
|
||||
if (this.preTargetModel) {
|
||||
this.preTargetModel.remove(this.tagCSS2DObj);
|
||||
}
|
||||
this.cameraPositionTween.onComplete(() => {
|
||||
this.orbitControls.target = modelP;
|
||||
this.camera.lookAt(modelP);
|
||||
// 选中的物体闪梭(这里必需放在下一个函数之前，这里需要使用到下一个函数需要清空的上一个模型)
|
||||
// handleModelFlash(e, this);
|
||||
|
||||
// 动画完成过后自动弹出标签
|
||||
autoOutTag(e, this);
|
||||
this.listenerEventFlag = false;
|
||||
});
|
||||
}
|
||||
//点击模型视角位移过去后模型闪烁函数
|
||||
// function handleModelFlash(e, context) {
|
||||
// if (context.timer) {
|
||||
// clearInterval(context.timer);
|
||||
// context.preTargetModel.material.color.set("white");
|
||||
// }
|
||||
// context.timer = setInterval(fun, 400);
|
||||
// let flag = false;
|
||||
// function fun() {
|
||||
// if (flag) {
|
||||
// e.material.color.set("red");
|
||||
// flag = false;
|
||||
// } else {
|
||||
// e.material.color.set("white");
|
||||
// flag = true;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// 视角移动过去自动弹出标签
|
||||
function autoOutTag(targetModel, context) {
|
||||
// 判断是否纯在设备
|
||||
// if (targetModel.hasDevice) return;
|
||||
context.preTargetModel = targetModel;
|
||||
context.tagCSS2DObj.element.style.display = "block";
|
||||
displayDevInfo(context, targetModel);
|
||||
targetModel.add(context.tagCSS2DObj);
|
||||
if (/l$/.test(targetModel.name)) {
|
||||
context.tagCSS2DObj.position.set(150, 0, 700);
|
||||
} else if (/r$/.test(targetModel.name)) {
|
||||
context.tagCSS2DObj.position.set(-150, 0, 700);
|
||||
}
|
||||
}
|
||||
|
||||
function displayDevInfo(context, targetModel) {
|
||||
if (!targetModel.info) {
|
||||
// 因为标签内的内容共同使用所以附着点没有信心则清空信息
|
||||
// context.tagCSS2DObj.element.children[1].children[1].innerHTML = "无";
|
||||
// context.tagCSS2DObj.element.children[2].children[1].innerHTML = "无";
|
||||
return;
|
||||
}
|
||||
console.log(targetModel.info);
|
||||
context.tagCSS2DObj.element.children[1].children[1].innerHTML =
|
||||
targetModel.info.name;
|
||||
context.tagCSS2DObj.element.children[2].children[1].innerHTML =
|
||||
targetModel.info.state;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// 轨道控制器开始结束hook
|
||||
export function handleStartChange(e) {
|
||||
// console.log("开始");
|
||||
}
|
||||
export function handleEndChange(e) {
|
||||
// 围绕点到照相机的位置
|
||||
// console.log("结束");
|
||||
// console.log(this.camera.position);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
export function handleLClick(targetPoint) {
|
||||
this.clearTagsObj();
|
||||
const worldPosition = new this.THREE.Vector3();
|
||||
//获取附着点的世界坐标系
|
||||
targetPoint.getWorldPosition(worldPosition);
|
||||
this._checkAnimation(worldPosition);
|
||||
// 显示左键属性栏
|
||||
this.tag2CSS2DObj.element.style.display = "block";
|
||||
// 设置标签位置
|
||||
this.tag2CSS2DObj.position.set(
|
||||
worldPosition.x,
|
||||
worldPosition.y,
|
||||
worldPosition.z
|
||||
);
|
||||
|
||||
this.tag2CSS2DObj.translateY(-15);
|
||||
this.tag2CSS2DObj.translateX(15);
|
||||
displayDevInfo(this, targetPoint);
|
||||
this.scene.add(this.tag2CSS2DObj);
|
||||
intoAnimation.call(this, targetPoint);
|
||||
}
|
||||
|
||||
function displayDevInfo(context, targetModel) {
|
||||
if (!targetModel.info) {
|
||||
// 因为标签内的内容共同使用所以附着点没有信心则清空信息
|
||||
context.tag2CSS2DObj.element.children[1].children[1].innerHTML = "无";
|
||||
context.tag2CSS2DObj.element.children[2].children[1].innerHTML = "无";
|
||||
return;
|
||||
}
|
||||
|
||||
context.tag2CSS2DObj.element.children[1].children[1].innerHTML =
|
||||
targetModel.info.name;
|
||||
context.tag2CSS2DObj.element.children[2].children[1].innerHTML =
|
||||
targetModel.info.state;
|
||||
}
|
||||
|
||||
function intoAnimation(targetPoint) {
|
||||
const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
|
||||
const positionOBj = this.camera.position;
|
||||
|
||||
const start = this.orbitControls.target;
|
||||
this.intoPointAnimation = new this.TWEEN.Tween({
|
||||
x: positionOBj.x,
|
||||
y: positionOBj.y,
|
||||
z: positionOBj.z,
|
||||
xTarget: start.x,
|
||||
yTarget: start.y,
|
||||
zTarget: start.z,
|
||||
});
|
||||
|
||||
this.intoPointAnimation.to(
|
||||
{
|
||||
x: worldP.x + 20,
|
||||
y: worldP.y + 5,
|
||||
z: worldP.z + 50,
|
||||
xTarget: worldP.x,
|
||||
yTarget: worldP.y,
|
||||
zTarget: worldP.z,
|
||||
},
|
||||
600
|
||||
);
|
||||
this.intoPointAnimation.start();
|
||||
this.intoPointAnimation.onUpdate((obj) => {
|
||||
this.camera.position.set(obj.x, obj.y, obj.z);
|
||||
this.camera.lookAt(obj.xTarget, obj.yTarget, obj.zTarget);
|
||||
this.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
|
||||
});
|
||||
this.intoPointAnimation.onComplete(() => {
|
||||
this.camera.lookAt(worldP.x, worldP.y, worldP.z);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
export function handleRClick(targetPoint) {
|
||||
this.clearTagsObj();
|
||||
// 全局临时标记该选中的模型;
|
||||
this.targetPoint = targetPoint;
|
||||
const worldPosition = new this.THREE.Vector3();
|
||||
//获取附着点的世界坐标系
|
||||
targetPoint.getWorldPosition(worldPosition);
|
||||
this._checkAnimation(worldPosition);
|
||||
// 显示左键属性栏
|
||||
this.tag3CSS2DObj.element.style.display = "block";
|
||||
// 设置标签位置
|
||||
this.tag3CSS2DObj.position.set(
|
||||
worldPosition.x,
|
||||
worldPosition.y,
|
||||
worldPosition.z
|
||||
);
|
||||
|
||||
this.tag3CSS2DObj.translateY(-15);
|
||||
this.tag3CSS2DObj.translateX(15);
|
||||
this.scene.add(this.tag3CSS2DObj);
|
||||
|
||||
intoAnimation.call(this);
|
||||
}
|
||||
|
||||
function intoAnimation() {
|
||||
const worldP = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
|
||||
const positionOBj = this.camera.position;
|
||||
|
||||
const start = this.orbitControls.target;
|
||||
this.intoPointAnimation = new this.TWEEN.Tween({
|
||||
x: positionOBj.x,
|
||||
y: positionOBj.y,
|
||||
z: positionOBj.z,
|
||||
xTarget: start.x,
|
||||
yTarget: start.y,
|
||||
zTarget: start.z,
|
||||
});
|
||||
|
||||
this.intoPointAnimation.to(
|
||||
{
|
||||
x: worldP.x + 20,
|
||||
y: worldP.y + 20,
|
||||
z: worldP.z + 50,
|
||||
xTarget: worldP.x,
|
||||
yTarget: worldP.y,
|
||||
zTarget: worldP.z,
|
||||
},
|
||||
600
|
||||
);
|
||||
this.intoPointAnimation.start();
|
||||
this.intoPointAnimation.onUpdate((obj) => {
|
||||
this.camera.position.set(obj.x, obj.y, obj.z);
|
||||
this.camera.lookAt(obj.xTarget, obj.yTarget, obj.zTarget);
|
||||
this.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
export function removeDev() {
|
||||
if (!this.targetPoint.hasDevice) {
|
||||
alert("该附着点不存在设备");
|
||||
return;
|
||||
} else {
|
||||
// 删除模型逻辑
|
||||
const devId = this.targetPoint.info.devId;
|
||||
|
||||
const model = this.scene.getObjectById(devId);
|
||||
this.scene.remove(model);
|
||||
|
||||
// 附着点可见
|
||||
this.targetPoint.visible = true;
|
||||
this.targetPoint.info = null;
|
||||
// 按钮可否操作情况
|
||||
this.addBtn.disabled = false;
|
||||
this.removeBtn.disabled = true;
|
||||
this.targetPoint.hasDevice = false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
*
|
||||
* @param {*} Vec3 保存单前摄像机位置状态
|
||||
*/
|
||||
export function saveState() {
|
||||
// 保存当前摄像机位置
|
||||
if (this.viewSate && this.viewSate.isSave) return;
|
||||
this.viewSate = {
|
||||
position: this.camera.position.clone(),
|
||||
isSave: true,
|
||||
};
|
||||
}
|
||||
/**
|
||||
* 恢复摄像机状态
|
||||
*/
|
||||
export function resetState() {
|
||||
if (this.viewSate && this.viewSate.isSave) {
|
||||
this.viewSate.isSave = false;
|
||||
//恢复原始的镜头指向
|
||||
this.camera.lookAt(0, 0, 0);
|
||||
this.orbitControls.target.set(0, 0, 0);
|
||||
//创建动画
|
||||
this.viewSateResetAnimation = new this.TWEEN.Tween(this.camera.position);
|
||||
this.viewSateResetAnimation.to(this.viewSate.position, 800);
|
||||
this.viewSateResetAnimation.start();
|
||||
//清空boxHelper
|
||||
this.scene.remove(this.scene.getObjectByName("boxHelper"));
|
||||
}
|
||||
}
|
||||
@@ -22,6 +22,15 @@ const routes = [
|
||||
title: '首页',
|
||||
breadcrumb: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/socket',
|
||||
name: 'socket',
|
||||
component: () => import('@/views/socket/index.vue'),
|
||||
meta: {
|
||||
title: 'socket',
|
||||
breadcrumb: true
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<template>
|
||||
home
|
||||
<tunnel-scene />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
130
src/views/socket/index.vue
Normal file
130
src/views/socket/index.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="chat-box">
|
||||
<div>
|
||||
<span>请输入序列号: </span>
|
||||
<el-input v-model="serialNumber" placeholder="请输入序列号" clearable></el-input>
|
||||
</div>
|
||||
<el-button type="primary" @click="initWebSocket">确认连接</el-button>
|
||||
<el-button type="primary" @click="closeSocket">关闭连接</el-button>
|
||||
<div class="socket-box">
|
||||
<div v-for="item in data" ref="child">
|
||||
<div v-if="item.type == 3">
|
||||
<span style="color: #007bff">server send:</span>
|
||||
<div>{{ item.cmd }}</div>
|
||||
</div>
|
||||
<div v-if="item.type == 4">
|
||||
<span style="color: #28a745"> server receive:</span>
|
||||
|
||||
<div>{{ item.cmd }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
|
||||
</div>
|
||||
<div class="logout">
|
||||
<el-button @click="handleLogout">退出登录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getToken} from "@/utils/auth";
|
||||
import {useAuthStore} from '@/store/userstore.js'
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const serialNumber = ref('')
|
||||
let send = {
|
||||
type: "ping"
|
||||
}
|
||||
let data = ref([])
|
||||
let customerSend = ref([])
|
||||
let token = getToken();
|
||||
const child = ref();
|
||||
watch(
|
||||
() => data.value,
|
||||
(newVal) => {
|
||||
nextTick(() => {
|
||||
child.value[newVal.length - 1].scrollIntoView(); // 关键代码
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
let socket = reactive('')
|
||||
const initWebSocket = () => {
|
||||
// let wsUrl = `ws://192.168.31.175:8000/wstunnel/debug/${token}/${serialNumber.value}`
|
||||
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/debug/${token}/${serialNumber.value}`
|
||||
console.log(wsUrl)
|
||||
socket = new WebSocket(wsUrl)
|
||||
// 2. ws.send()给服务器发送信息
|
||||
//连接发生错误的回调方法
|
||||
socket.onerror = function () {
|
||||
console.log("ws连接发生错误");
|
||||
};
|
||||
//连接成功建立的回调方法
|
||||
socket.onopen = function () {
|
||||
// let authInfo = {
|
||||
// // token: getToken(),
|
||||
// type: "auth",
|
||||
// cluster: "notice"
|
||||
// }
|
||||
// socket.send(JSON.stringify(authInfo))
|
||||
console.log("ws连接成功");
|
||||
}
|
||||
//接收到消息的回调方法
|
||||
socket.onmessage = function (event) {
|
||||
data.value.push(JSON.parse(event.data))
|
||||
// else {
|
||||
// customerSend.value.push(JSON.parse(event.data))
|
||||
// }
|
||||
console.log("服务器返回的信息: ", JSON.parse(event.data));
|
||||
}
|
||||
//连接关闭的回调方法
|
||||
socket.onclose = function () {
|
||||
// initWebSocket()
|
||||
console.log("ws连接关闭");
|
||||
}
|
||||
// setInterval(() => {
|
||||
// socket.send(JSON.stringify(send))
|
||||
// }, 30000)
|
||||
}
|
||||
const closeSocket = () => {
|
||||
socket.close();
|
||||
}
|
||||
const handleLogout = () => {
|
||||
authStore.userLogout()
|
||||
router.push('/login')
|
||||
}
|
||||
const handleClear = () => {
|
||||
data.value = []
|
||||
}
|
||||
// initWebSocket()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat-box {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
border: 1px solid #ccc;
|
||||
//overflow: auto;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
|
||||
.socket-box {
|
||||
width: 475px;
|
||||
height: 450px;
|
||||
border: 1px solid #ccc;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user