odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

唐润平：上线版,功能为待完善

Browse Source
This commit is contained in:
trp
2023-12-14 10:26:29 +08:00
parent e95c24befe
commit fb9dfb37a2
21 changed files with 701 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@@ -1,9 +1,9 @@
<template>
<RouterView/>
<RouterView />
</template>
<script setup>
import autofit from 'autofit.js';
import autofit from "autofit.js";
onMounted(() => {
autofit.init({
@@ -13,18 +13,20 @@ onMounted(() => {
resize: true,
ignore: [
{
el: "#tunnel-box",
el: "#cvs",
height: "100vh",
width: "100vw",
}, {
},
{
el: "#login-box",
height: "100vh",
width: "100vw",
},{
},
{
el: "#chat-box",
height: "100vh",
width: "100vw",
}
},
],
});
});

137
src/components/content/tunnelScene/TunnelScene.vue
View File

@@ -1,13 +1,24 @@
<template>
<div id="scene" ref="content">
<div id="scene">
<div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" />
<edit-dev ref="edit" @addDev="handleAddDev" @removeDev="handleRemoveDev" :hasDev="hasDevice" />
<edit-dialog
ref="edit"
@addEquipment="handleAddEqu"
@removeEquipment="handleRemoveEqu"
@cancel="handleCancel"
:hasDev="hasDevice"
:pointNum="pointNum"
pointGap="500"
/>
</div>
</template>
<script setup>
import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js";
import DevInfo from "./displayInfoComp/DevInfo.vue";
import editDialog from "./editEquComp/editDialog.vue";
// 导入模模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
@@ -19,23 +30,28 @@ import {
CSS3DObject,
CSS3DSprite,
} from "three/addons/renderers/CSS3DRenderer.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import {
CSS2DRenderer,
CSS2DObject,
} from "three/addons/renderers/CSS2DRenderer.js";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import DevInfo from "./childComp/DevInfo.vue";
import EditDev from "./childComp/EditDev.vue";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
// 获取html标签跟随组件
// 获取html标签跟随组件dom
const content = ref(null);
const info = ref(null);
const edit = ref(null);
const num = 10000;
let demo; //定义demo全局变量
const loader = new OBJLoader();
// const loader = new OBJLoader();
const loader = new GLTFLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
// 模版挂载后
onMounted(handleMounted);
// 处理回调
// 挂载后回调
async function handleMounted() {
const doms = [info.value.$el, edit.value.$el];
demo = new ThreeDScene(three, content.value);
@@ -44,28 +60,20 @@ async function handleMounted() {
demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
demo.setDistance(10);
lClickCallback(demo); //左键回调
rClickCallback(demo); //右键回调
lClickCallback(demo); //绑定左键回调
rClickCallback(demo); //绑定右键回调
//加载HDR背景图片
demo.loadBackground(backColorSet)
demo.loadBackground(hdrLoader, backColorSet);
// 初始化设备模型
try {
const deviceList = [];
let result = await loadModel("/devicesModel/Camera.obj");
let result = await loadModel("/devicesModel/fan.glb");
deviceList.push(result);
modelEffectProcess(result);
result = await loadModel("/devicesModel/fan.obj");
result = await loadModel("/devicesModel/sensor.glb");
deviceList.push(result);
modelEffectProcess(result);
result = await loadModel("/devicesModel/sensors.obj");
deviceList.push(result);
modelEffectProcess(result);
result = await loadModel("/devicesModel/sensors.obj");
deviceList.push(result);
modelEffectProcess(result);
result = await loadModel("/devicesModel/sensors.obj");
deviceList.push(result);
modelEffectProcess(result);
// 给对象初加载设备模型
demo.initDevicesModel(deviceList);
console.info("设备模型加载完毕");
@@ -75,6 +83,7 @@ async function handleMounted() {
console.log(err);
}
}
// 每个模型加载回调
function loadModel(path) {
return new Promise((resolve, reject) => {
@@ -83,7 +92,7 @@ function loadModel(path) {
(obj) => {
resolve(obj);
},
(xhr) => { },
(xhr) => {},
(err) => {
reject(err);
}
@@ -91,15 +100,6 @@ function loadModel(path) {
});
}
function modelEffectProcess(model) {
model.traverse((v) => {
v.material = new three.MeshBasicMaterial
v.material.color = new three.Color(0xC0C0C0)
})
}
let hasDevice = ref(true);
let devInfo = reactive({
meshId: null,
@@ -108,7 +108,7 @@ let devInfo = reactive({
position: "无",
});
// 赋值功能
// 对象建构赋值功能
function editDevInfo(
value = {
meshId: null,
@@ -123,7 +123,7 @@ function editDevInfo(
devInfo.position = value.position;
}
//点击左键返回附着点信息给组件
//左键/双击左键回调函数
function lClickCallback(demo) {
//demo动态添加函数，为操作组件内部
function displayDevInfo(targetPoint = null) {
@@ -138,10 +138,18 @@ function lClickCallback(demo) {
demo.addFunction("displayDevInfo", displayDevInfo);
}
// 点击右键设备返回附着点对象
let pointNum = ref(0);
// 右键点击附着点后调函数
function rClickCallback(demo) {
function editDev(targetPoint = null) {
hasDevice = targetPoint.hasDevice;
pointNum.value = Number(
targetPoint.name.substring(
targetPoint.name.indexOf("_") + 1,
targetPoint.name.lastIndexOf("_")
)
);
if (!targetPoint.info) return;
editDevInfo(targetPoint.info);
}
@@ -149,39 +157,40 @@ function rClickCallback(demo) {
}
// 添加设备
function handleAddDev(devInfo) {
if (!demo) {
// 处理未加载完场景情况
console.info("3D场景正在渲染，请稍后操作");
return;
}
const tempDevInfo = demo.addDev(devInfo);
hasDevice.value = true;
editDevInfo(tempDevInfo);
ElMessage({
message: "添加成功",
type: "success",
});
function handleAddEqu() {
console.log("添加", pointInfo);
}
// 删除设备
async function handleRemoveDev() {
const result = await demo.removeDev(devInfo.meshId);
if (result === "ok") {
hasDevice.value = false;
editDevInfo();
ElMessage({
message: "删除成功",
type: "success",
});
}
async function handleRemoveEqu() {
// const result = await demo.removeDev(devInfo.meshId);
// if (result === "ok") {
// hasDevice.value = false;
// editDevInfo();
// ElMessage({
// message: "删除成功",
// type: "success",
// });
// }
console.log("删除");
}
// 处理取消关闭编辑框事件
function handleCancel() {
if (!demo) return;
// 关闭标签
demo.isControlOrbit(true);
demo.clearTagsObj();
}
</script>
<style lang="scss" scope>
#scene {
position: relative;
height: 100vh;
width: 100vw;
height: 100%;
width: 100%;
#cvs {
height: 100%;
}
}
</style>

233
src/components/content/tunnelScene/childComp/EditDev.vue
View File

@@ -1,233 +0,0 @@
<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)"
:class="{ 'li-active': checkIndex === key }">
<img :src="item.devImgUrl" />
<div>{{ item.devName + key }}</div>
</li>
</ul>
</div>
<div class="option-btn">
<button @click="removeDev" :disabled="!params.hasDev">移除设备</button>
<button @click="addDev" :disabled="params.hasDev">添加设备</button>
</div> -->
<div>
<!-- 文字内容框 -->
<div class="edit-dev-hole-distance">
<!-- 每个附着点之间的间隔和被点击之后的第几个都需要动态传入 -->
<!-- 之后还需要看最后的计算结果 -->
<span>当前距离洞口：{{ pointeachlen }}米*{{ poiotwhich }}={{ pointeachlen * poiotwhich }}</span>
</div>
<!-- 输入框内容 -->
<div class="edit-dev-input">
<span class="edit-dev-input-type-font">传感器类型</span>
<div class="edit-dev-input-type">
<select v-model="typeselected" @change="typehandleChange">
<option v-for="type in equipmentTypes" :key="type.value" :value="type.value">
{{ type.text }}
</option>
</select>
</div>
<span class="edit-dev-input-option-font">设备选择</span>
<div class="edit-dev-input-option">
<select v-model="optionselected" @change="optionhandleChange">
<option v-for="option in equipmentOptions" :key="option.value" :value="option.value">
{{ option.text }}
</option>
</select>
</div>
<span class="edit-dev-input-threshold-font">阈值</span>
<div class="edit-dev-input-threshold">
<input type="text" @change="thresholdChange" v-model="thresholdValue">
</div>
</div>
<!-- 删除和确定框 -->
<div class="edit-dev-button">
<div class="edit-dev-button-del">
<!-- 删除 -->
<button>删除</button>
</div>
<div class="edit-dev-button-sure">
<!-- 确认 -->
<button>确认</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, defineEmits, onMounted, ref, defineProps } from "vue";
const typeselected = ref("1");
const optionselected = ref("1");
const thresholdValue = ref("")
const allAdate = reactive({
point: {
pointachlen: 1,
poiotwhich: 2
},
equipmentTypes: [
{ text: "风机", value: "1" },
{ text: "风压传感器", value: "2" },
{ text: "普通传感器", value: "3" },
],
equipmentOptions: [
{
value: "1",
text: "风机",
Options: [
{ text: "1号风机", value: "1", threshold: 2 },
{ text: "2号风机", value: "2", threshold: 2 },
{ text: "3号风机", value: "3", threshold: 2 }
]
},
{
value: "2",
text: "风压传感器",
Options: [
{ text: "1号风压", value: "1", threshold: 2 },
{ text: "2号风压", value: "2", threshold: 2 },
{ text: "3号风压", value: "3", threshold: 2 }
]
},
{
value: "3",
text: "普通传感器",
Options: [
{ text: "1号传感器", value: "1", threshold: 2 },
{ text: "2号传感器", value: "2", threshold: 2 },
{ text: "3号传感器", value: "3", threshold: 2 }
]
}
]
})
const pointeachlen = ref(allAdate.point.pointachlen);
const poiotwhich = ref(allAdate.point.poiotwhich);
const equipmentTypes = ref(allAdate.equipmentTypes);
const equipmentOptions = ref(allAdate.equipmentOptions)
function typehandleChange() {
equipmentOptions.value = allAdate.equipmentOptions[typeselected.value].Options
}
function optionhandleChange() {
}
function thresholdChange() {
allAdate.equipmentOptions[typeselected.value].Options[optionselected.value].threshold = thresholdValue
console.log(allAdate.equipmentOptions[typeselected.value].Options[optionselected.value].threshold);
}
function clear() {
selected.value = "1";
optionselected = "1"
}
// const params = defineProps(["hasDev", "meshId"]);
// // 定义需要发射的事件
// const emit = defineEmits(["addDev", "removeDev"]);
// // 挂载后加所有的设备模型
// const cameradevItem = {
// devName: "摄像头",
// devImgUrl: "/images/camera.jpg",
// devState: "未开启",
// };
// const fandevItem = {
// devName: "风机",
// devImgUrl: "/images/camera.jpg",
// devState: "未开启",
// };
// const WindsensorsdevItem = {
// devName: "风压传感器",
// devImgUrl: "/images/camera.jpg",
// devState: "未开启",
// };
// const GassensorsdevItem = {
// devName: "气体传感器",
// devImgUrl: "/images/camera.jpg",
// devState: "未开启",
// };
// const TemsensorsdevItem = {
// devName: "温度传感器",
// devImgUrl: "/images/camera.jpg",
// devState: "未开启",
// };
// const list = [cameradevItem, fandevItem, WindsensorsdevItem, GassensorsdevItem, TemsensorsdevItem];
// const devicesList = reactive(list);
// const checkIndex = ref(-1);
// //选择设备
// function checkDev(key) {
// checkIndex.value = key;
// }
// // 添加设备
// function addDev() {
// if (checkIndex.value === -1) {
// alert("请选择设备");
// return;
// }
// const devInfo = list[checkIndex.value];
// devInfo.checkIndex = checkIndex.value;
// emit("addDev", devInfo);
// }
// //删除设备
// function removeDev() {
// emit("removeDev");
// }
</script>
<style lang="scss" scoped>
#edit-dev {
width: 540px;
height: 683px;
background: rgba(7, 35, 72, 0.79);
border-radius: 20px;
border: 2px solid #0F82AF;
.edit-dev-hole-distance {
width: 388px;
height: 35px;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
line-height: 35px;
}
.edit-dev-input-type-font {
width: 130px;
height: 35px;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
line-height: 35px;
}
.edit-dev-input-type {
width: 284px;
height: 51px;
border: 1px solid #0F82AF;
}
}
.li-active {
background: rgb(224, 114, 114);
}
</style>

0
src/components/content/tunnelScene/childComp/DevInfo.vue → src/components/content/tunnelScene/displayInfoComp/DevInfo.vue
View File

60
src/components/content/tunnelScene/editEquComp/childComps/InputNum.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<div id="input-num">
<p>{{ params.name }}</p>
<input
type="text"
:placeholder="params.placeholder"
@input="handleChange"
/>
</div>
</template>
<script setup>
import { ref, defineProps, defineEmits, onUnmounted } from "vue";
const params = defineProps({
name: String,
placeholder: String,
});
const emit = defineEmits(["inputValue"]);
let timer = null;
function handleChange(e) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
emit("inputValue", e.target.value);
}, 200);
}
onUnmounted(handleUnmounted);
function handleUnmounted() {
clearInterval(timer);
}
</script>
<style lang="scss" scoped>
#input-num {
margin: 40px 30px 0px 30px;
P {
width: 130px;
height: 35px;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 35px;
}
input {
width: 284px;
height: 51px;
border: 1px solid #0f82af;
background: transparent;
margin-top: 20px;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 35px;
padding: 0px 10px;
overflow: hidden;
}
::placeholder {
color: #0f82af;
}
}
</style>

99
src/components/content/tunnelScene/editEquComp/childComps/SelectInput.vue Normal file
View File

@@ -0,0 +1,99 @@
<template>
<div id="select-input">
<p>{{ params.name }}</p>
<div class="select">
<div class="value">
<span>{{ value }}</span>
<img
src="/images/htmlEditDialog/select-icon.png"
alt=""
@click="isShowList = !isShowList"
/>
</div>
<ul v-show="isShowList">
<li
v-for="(item, index) of params.options"
:key="index"
@click="handleClickItem(index)"
>
{{ item.label }}
</li>
</ul>
</div>
</div>
</template>
<script setup>
import { ref, reactive, defineEmits, defineProps } from "vue";
const params = defineProps({
name: String,
options: Array,
placeholder: String,
});
const emit = defineEmits(["selected"]);
let isShowList = ref(false);
const value = ref(params.placeholder);
function handleClickItem(index) {
value.value = params.options[index].label;
isShowList.value = false;
emit("selected", params.options[index]);
}
</script>
<style lang="scss" scoped>
#select-input {
margin: 40px 30px 0px 30px;
P {
width: 130px;
height: 35px;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 35px;
}
.select {
position: relative;
.value {
width: 284px;
height: 51px;
border: 1px solid #0f82af;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 51px;
margin-top: 20px;
padding: 0px 0px 0px 10px;
position: relative;
img {
position: absolute;
right: 20px;
bottom: 18px;
cursor: pointer;
}
img:active {
transform: scale(0.8);
}
}
ul {
position: absolute;
width: 284px;
background: #072247;
border-radius: 0px 0px 20px 20px;
border: 1px solid #0f82af;
z-index: 10000;
li {
height: 37px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 37px;
margin: 20px 10px;
cursor: pointer;
}
li:hover {
color: #08b7b8;
}
}
}
}
</style>

194
src/components/content/tunnelScene/editEquComp/editDialog.vue Normal file
View File

@@ -0,0 +1,194 @@
<template>
<div id="edit-dialog">
<div class="distance-back">
<p>{{ pointDistance_str }}</p>
<img
src="/images/htmlEditDialog/back-icon.png"
alt=""
@click="handleCancel"
/>
</div>
<div class="dev-info"></div>
+
<div class="setting">
<select-input
name="传感器类型"
placeholder="请选择传感器类型"
:options="options"
@selected="handelSelectType"
/>
<select-input
name="设备选择"
placeholder="请选择设备"
:options="options"
@selected="handelSelectEquipment"
/>
<input-num
name="阈值"
placeholder="请输入阈值"
@inputValue="handelInput"
/>
</div>
<div class="btn">
<button @click="removeEquipment">删除</button>
<button @click="addEquipment">添加</button>
</div>
</div>
</template>
<script setup>
import { reactive, computed, defineEmits, defineProps } from "vue";
import SelectInput from "./childComps/SelectInput.vue";
import InputNum from "./childComps/InputNum.vue";
import { remove } from "three/examples/jsm/libs/tween.module";
// 定义事件发射器，父组件监听
const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
const params = defineProps(["pointNum", "pointGap"]); //隧道第几个锚点
//计算锚点之间距离
const pointDistance_str = computed(
() =>
`${params.pointGap}米*${params.pointNum}=${
params.pointGap * params.pointNum
}米`
);
// 请求数据模型
const equipmentSetting = reactive({
equipmentType: "", //设备类型
chooseEquipment: "", //设备选择(设备名称)
threshold: "", //阈值
});
// 选项参数
const options = reactive([
{ label: "风机1", id: "321321" },
{ label: "风机2", id: "321321" },
{ label: "风机3", id: "321321" },
{ label: "风机4", id: "321321" },
]);
// const obj = {
// equipmentId: String, //传感器id
// equipmentName: String, //设备名称
// pointName: String, //附着点名称（定位）
// equipmentType: String, //设备类型（类型可根据后端）
// equipmentOnline: Boolean, //是否在线
// isFan: Boolean, //是不是风机
// fanSpeed: Number, //F
// };
// const tunnel = {
// tunnelId: "",
// };
// 显示锚点距离
let point_num = ref(0);
function handelSelectType(e) {
equipmentSetting.equipmentType = e;
}
function handelSelectEquipment(e) {
equipmentSetting.chooseEquipment = e;
}
function handelInput(e) {
equipmentSetting.threshold = e;
console.log(equipmentSetting);
}
// 处理取消事件
function handleCancel() {
// 发射事件给tunnel父组件
emit("cancel");
}
// 删除模型
function removeEquipment() {
emit("removeEquipment");
}
// 添加设备
function addEquipment() {
emit("addEquipment");
}
</script>
<style lang="scss" scoped>
#edit-dialog {
width: 540px;
// min-height: 683px;
background: rgba(7, 35, 72, 0.79);
border-radius: 20px;
border: 2px solid #0f82af;
position: absolute;
z-index: 999;
display: block;
opacity: 0;
.distance-back {
height: 30px;
display: flex;
justify-content: space-between;
margin: 20px 20px 0px 30px;
p {
width: 388px;
height: 35px;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 35px;
}
img {
cursor: pointer;
}
img:active {
transform: scale(0.9);
}
}
.setting {
.dev-type {
margin: 30px 30px;
P {
width: 130px;
height: 35px;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 35px;
}
}
}
.btn {
margin: 100px 40px 40px 40px;
display: flex;
justify-content: space-between;
button {
cursor: pointer;
transition: transform 0.1s linear 0s;
}
& :nth-child(1) {
width: 190px;
height: 60px;
border-radius: 11px;
border: 2px solid #0f82af;
background: transparent;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 60px;
}
& :nth-child(2) {
width: 190px;
height: 60px;
background: #08b7b8;
border-radius: 11px;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 60px;
}
button:active {
transform: scale(0.9);
}
}
}
</style>

35
src/components/content/tunnelScene/sceneClass/addDev/index.js
View File

@@ -2,8 +2,6 @@ export default function (devInfo) {
const dev = this.deviceList[devInfo.checkIndex].clone(); //克隆对应的moxin
const p = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
dev.position.copy(p);
// console.log(this.targetPoint);
modelEffectProcess(dev, this.targetPoint)
this.scene.add(dev);
this.targetPoint.hasDevice = true; //标记还存在设备
// 附着点记录信息
@@ -17,35 +15,16 @@ export default function (devInfo) {
return this.targetPoint.info;
}
function modelEffectProcess(model, point) {
if (model.children[0].name == "camera") {
console.log(model);
console.log(point);
model.scale.set(0.1, 0.1, 0.1)
}
if (model.children[0].name == "fan") {
console.log(model);
console.log(point);
}
if (model.children[0].name == "sensors") {
console.log(model);
console.log(point);
model.scale.set(0.2, 0.2, 0.2)
}
}
function transformPosition(position, distance) {
return `${equal(position.charAt(position.lastIndexOf("_") + 1))}边隧道${equal(
position.charAt(position.lastIndexOf("_") + 2)
)}侧设备约${(Number(
position.substring(position.indexOf("_") + 1, position.lastIndexOf("_"))
) +
1) *
distance
}米处`;
)}侧设备约${
(Number(
position.substring(position.indexOf("_") + 1, position.lastIndexOf("_"))
) +
1) *
distance
}米处`;
}
function equal(str) {

2
src/components/content/tunnelScene/sceneClass/addDevice/index.js
View File

@@ -13,7 +13,6 @@ function handleLoadedDevice(model) {
const wp = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
model.position.copy(wp);
this.targetPoint.visible = false;
model.scale = 0.1
this.scene.add(model);
if (model.name === "camera") {
@@ -21,7 +20,6 @@ function handleLoadedDevice(model) {
model.translateZ(4);
model.translateY(-0.5);
}
// 添加的信息请求或初始化的信息
this.targetPoint.info = {
name: "摄像头",

100
src/components/content/tunnelScene/sceneClass/demo.js
View File

@@ -45,9 +45,9 @@ export default class Demo {
1000
);
this.camera.position.z = -60;
this.camera.position.y = 20;
this.camera.position.x = -30;
this.camera.position.z = 1.24;
this.camera.position.y = 9.14;
this.camera.position.x = -63.79;
this.camera.lookAt(0, 0, 1000);
// 初始化渲染器
@@ -58,6 +58,7 @@ export default class Demo {
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.domElement.style.position = "absolute";
this.mountedElement.appendChild(this.renderer.domElement);
console.log(this.renderer.domElement);
// 创建渲染帧
this.render = () => {
this.__renderScope();
@@ -101,6 +102,10 @@ export default class Demo {
if (this.intoPointAnimation) {
this.intoPointAnimation.update();
}
// 隧道颜色渐变动画
if (this.opacityTween) {
this.opacityTween.update();
}
}
// 添加世界坐标系
@@ -133,6 +138,8 @@ export default class Demo {
gltf.scene.traverse((child) => {
this._forModels(child);
});
// 初始化场景位置
gltf.scene.position.set(-5, 0, 10);
this.scene.add(gltf.scene);
// 加载完后可执行函数
this._afterLoaded(gltf.scene);
@@ -156,14 +163,14 @@ export default class Demo {
this._ClickModel(this.points);
}
// 在此方法中对模型批量操作
// 在此方法中对模型批量操作，这里遍历附着点
_forModels(child) {
// 匹配附着点(这里不适合对单个模型进行保存，批量对模型进行操作)
if (child.isMesh && /^point+/.test(child.name)) {
this.points.push(child);
// 改变为基础材质
child.material = new this.THREE.MeshBasicMaterial();
child.scale.set(0.01, 0.01, 0.01);
// 遍历一个属性是否存在设备
child.hasDevice = false; //初始化
}
@@ -178,7 +185,7 @@ export default class Demo {
this.camera,
this.renderer.domElement
);
this.orbitControls.object.position.set(-27.285, 16.356, -54.925);
//限制轨道控制器的视角变化
this.orbitControls.maxPolarAngle = Math.PI * (3 / 5);
// 监听控制器变化
@@ -242,6 +249,7 @@ export default class Demo {
}
// 处理点击2次触发事件事件
__handleListenerDBLClickEvent(isClickModels, e) {
e.preventDefault();
// 如果监听到双击则清空单次点击事件
clearTimeout(this.EventTimer);
//最后一个是监听器默认参数
@@ -263,6 +271,7 @@ export default class Demo {
// 处理点击左右键触发的事件
__handleListenerClickRLEvent(isClickModels, e) {
e.preventDefault();
clearTimeout(this.EventTimer);
this.EventTimer = setTimeout(() => {
const mouse = new this.THREE.Vector2();
@@ -276,9 +285,9 @@ export default class Demo {
this.setBoxHelper(intersects[0].object);
// 处理点击左右键事件
if (e.button === 0) {
if (e.button === 2) {
this._handleLClick(intersects[0].object);
} else if (e.button === 2) {
} else if (e.button === 0) {
this._handleRClick(intersects[0].object);
}
}, 400);
@@ -309,18 +318,12 @@ export default class Demo {
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.tag3CSS2DObj.position.y = 1000;
this.tagCSS2DObj.scale.set(3, 3, 3);
this.tag3CSS2DObj.scale.set(0.025, 0.025, 0.025); //编辑框
this.tag3CSS2DObj.position.set(10, 0, 10);
this.tagCSS2DObj.scale.set(0.5, 0.5, 0.5);
}
clearTagsObj() {
if (this.preDBLModel) {
this.preDBLModel.remove(this.tagCSS2DObj);
@@ -378,9 +381,64 @@ export default class Demo {
setDistance(distance = 10) {
this.distance = distance;
}
loadBackground(backColorSet) {
this.scene.background = new this.THREE.TextureLoader().load("/images/background/background.png", function (texture) {
texture.encoding = backColorSet;
});
loadBackground(hdrLoader, backColorSet) {
// hdrLoader.load("/images/background/background.hdr", (texture) => {
// texture.mapping = this.THREE.EquirectangularReflectionMapping;
// this.scene.background = texture;
// this.scene.environment = texture;
// })
this.scene.background = new this.THREE.TextureLoader().load(
"/images/background/background.png",
function (texture) {
texture.encoding = backColorSet;
}
);
}
/**
*
* @param {Boolean} option 是否禁用轨道控制器
*/
isControlOrbit(option = true) {
this.orbitControls.enabled = option;
const mesh = this.scene.getObjectByName("chanel");
const mesh2 = this.scene.getObjectByName("chanel_1");
const mesh3 = this.scene.getObjectByName("chanel_2");
const mesh4 = this.scene.getObjectByName("chanel_3");
const opacityTween = (startVal, endVal, isNeedLookAt = false) => {
this.opacityTween = new this.TWEEN.Tween({
opacity: startVal,
lookX: this.orbitControls.target.x,
lookY: this.orbitControls.target.y,
lookZ: this.orbitControls.target.z,
});
this.opacityTween.to(
{
opacity: endVal,
lookX: 0,
lookY: 0,
lookZ: 0,
},
500
);
this.opacityTween.start();
this.opacityTween.onUpdate((obj) => {
mesh.material.opacity = obj.opacity;
mesh2.material.opacity = obj.opacity;
mesh3.material.opacity = obj.opacity;
mesh4.material.opacity = obj.opacity;
if (!isNeedLookAt) return;
this.camera.lookAt(obj.lookX, obj.lookY, obj.lookZ);
this.orbitControls.target.set(obj.lookX, obj.lookY, obj.lookZ);
});
};
if (!option) {
// 显示编辑框隧道颜色
opacityTween(0.5, 0.1);
} else {
// 退出编辑框什么颜色
opacityTween(0.1, 0.5, true);
}
}
}

1
src/components/content/tunnelScene/sceneClass/handleDBLclick/index.js
View File

@@ -1,4 +1,5 @@
export function handleDBLClick(e) {
return;
this._saveSate();
// 注意位置不能改变
this.clearTagsObj();

2
src/components/content/tunnelScene/sceneClass/handleOrbitControlsChange/index.js
View File

@@ -5,5 +5,5 @@ export function handleStartChange(e) {
export function handleEndChange(e) {
// 围绕点到照相机的位置
// console.log("结束");
// console.log(this.camera.position);
// console.log(this.orbitControls.object.position);
}

11
src/components/content/tunnelScene/sceneClass/handleRLclick/handleLclick.js
View File

@@ -1,4 +1,5 @@
export function handleLClick(targetPoint) {
return;
this.clearTagsObj();
const worldPosition = new this.THREE.Vector3();
//获取附着点的世界坐标系
@@ -7,11 +8,11 @@ export function handleLClick(targetPoint) {
// 显示左键属性栏
this.tag2CSS2DObj.element.style.display = "block";
// 设置标签位置
this.tag2CSS2DObj.position.set(
worldPosition.x,
worldPosition.y,
worldPosition.z
);
// this.tag2CSS2DObj.position.set(
// worldPosition.x,
// worldPosition.y,
// worldPosition.z
// );
// 标签定位
this.tag2CSS2DObj.translateY(-15);
this.tag2CSS2DObj.translateX(15);

19
src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js
View File

@@ -14,18 +14,20 @@ export function handleRClick(targetPoint) {
worldPosition.y,
worldPosition.z
);
this.tag3CSS2DObj.translateY(-15);
this.tag3CSS2DObj.translateX(15);
this.isControlOrbit(false);
this.tag3CSS2DObj.translateX(-3);
this.tag3CSS2DObj.translateZ(10);
this.scene.add(this.tag3CSS2DObj);
intoAnimation.call(this);
// 返回给组件的回调函数
this.displayDevInfo(targetPoint);
// 返回给编辑组件的回调函数
this.editDev(targetPoint);
}
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,
@@ -35,12 +37,11 @@ function intoAnimation() {
yTarget: start.y,
zTarget: start.z,
});
this.intoPointAnimation.to(
{
x: worldP.x + 20,
y: worldP.y + 20,
z: worldP.z + 50,
x: worldP.x - 10,
y: worldP.y + 3,
z: worldP.z - 12,
xTarget: worldP.x,
yTarget: worldP.y,
zTarget: worldP.z,

20
src/components/content/tunnelScene/sceneClass/removeDevice/index.js
View File

@@ -1,20 +0,0 @@
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;
}
}

15
src/components/content/tunnelScene/utils/toImg.js Normal file
View File

@@ -0,0 +1,15 @@
/**
* @param {String} text 把输入的文字转化为base64的img图片
*/
export default function (text, width = 100, height = 50) {
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "black";
ctx.font = "30px serif";
ctx.fillText(text, 0, 30);
return canvas.toDataURL();
}

227
src/views/tunnel/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div id="main">
<div class="box-top">
<manage-btn v-model="selectIndex" @select="manageSelect"/>
<manage-btn v-model="selectIndex" @select="manageSelect" />
<div class="tunnel-title"></div>
<manage-length class="tunnel-length"></manage-length>
<div class="top-right">
@@ -16,30 +16,56 @@
</div>
</div>
</div>
<tunnel-scene id="tunnel-box"/>
<tunnel-scene id="tunnel-box" />
<div class="left">
<el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false">
<fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"/>
<transducer-list :list="socketData.leftData" :transducer-data="largeScreenData"/>
<used-ele :list="socketData.leftData" :ele-data="largeScreenData"/>
<el-drawer
v-model="drawerLeft"
direction="ltr"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<fan-info
v-if="showFan"
:list="socketData.leftData"
:fan-data="largeScreenData"
/>
<transducer-list
:list="socketData.leftData"
:transducer-data="largeScreenData"
/>
<used-ele :list="socketData.leftData" :ele-data="largeScreenData" />
</el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div>
</div>
<div class="right">
<el-drawer
v-model="drawerRight"
direction="rtl"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
v-model="drawerRight"
direction="rtl"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
<air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData"/>
<wind-pressure-list
v-if="showFan"
:list="socketData.windPressure"
:win-data="largeScreenData"
/>
<air-info
v-if="showFan"
:list="socketData.sensor"
:air-data="largeScreenData"
/>
<bad-gas-info
v-if="showFan"
:list="socketData.sensor"
:bad-gas-data="largeScreenData"
/>
</el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div>
@@ -68,98 +94,103 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import ManageLength from "@/components/manageLength/index.vue";
import {dateFormat} from "@/utils/date.js";
import {onMounted} from "vue";
import {getToken} from "@/utils/auth";
import {useAuthStore} from '@/store/userstore.js'
import {getLargeScreen} from "@/api/largeScreen";
import { dateFormat } from "@/utils/date.js";
import { onMounted } from "vue";
import { getToken } from "@/utils/auth";
import { useAuthStore } from "@/store/userstore.js";
import { getLargeScreen } from "@/api/largeScreen";
const authStore = useAuthStore()
const router = useRouter()
const selectIndex = ref(1)
const showFan = ref(false)
const drawerLeft = ref(true)
const drawerRight = ref(true)
const currentSite = ref('松江站')
const currentUser = ref('admin')
const currentDate = ref(dateFormat())
const tunnelBtn = ref()
const authStore = useAuthStore();
const router = useRouter();
const selectIndex = ref(1);
const showFan = ref(false);
const drawerLeft = ref(true);
const drawerRight = ref(true);
const currentSite = ref("松江站");
const currentUser = ref("admin");
const currentDate = ref(dateFormat());
const tunnelBtn = ref();
const tunnelList = ref([
{
value: 0,
name: '一号隧道'
}, {
name: "一号隧道",
},
{
value: 1,
name: '二号隧道'
}, {
name: "二号隧道",
},
{
value: 2,
name: '三号隧道'
}, {
name: "三号隧道",
},
{
value: 3,
name: '四号隧道'
}, {
name: "四号隧道",
},
{
value: 4,
name: '五号隧道'
}, {
name: "五号隧道",
},
{
value: 5,
name: '六号隧道'
}
])
let socket = reactive('')
const serialNumber = ref('SC00DY00GH00ELBT')
name: "六号隧道",
},
]);
let socket = reactive("");
const serialNumber = ref("SC00DY00GH00ELBT");
let token = getToken();
let send = {
type: "ping"
}
const largeScreenData = ref(null)
type: "ping",
};
const largeScreenData = ref(null);
const socketData = reactive({
leftData: [],
windPressure: [],
sensor: [],
})
});
onMounted(() => {
nextTick(() => {
showFan.value = true
})
getScreenInfo()
})
showFan.value = true;
});
getScreenInfo();
});
const getScreenInfo = async () => {
await getLargeScreen(1).then(res => {
await getLargeScreen(1).then((res) => {
if (res?.code === 1000) {
largeScreenData.value = res.data
largeScreenData.value = res.data;
}
})
}
});
};
const manageSelect = (index) => {
console.log('首页点击-', index)
console.log("首页点击-", index);
if (index === 0) {
router.push('/site')
router.push("/site");
}
};
const closeLeft = () => {
drawerLeft.value = !drawerLeft.value
}
drawerLeft.value = !drawerLeft.value;
};
const closeRight = () => {
drawerRight.value = !drawerRight.value
}
drawerRight.value = !drawerRight.value;
};
const handleLogout = () => {
authStore.userLogout()
router.push('/login')
}
authStore.userLogout();
router.push("/login");
};
const previousBtn = () => {
tunnelBtn.value.prev()
}
tunnelBtn.value.prev();
};
const nextBtn = () => {
tunnelBtn.value.next();
}
};
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`
console.log(wsUrl)
socket = new WebSocket(wsUrl)
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
console.log(wsUrl);
socket = new WebSocket(wsUrl);
//连接发生错误的回调方法
socket.onerror = function () {
console.log("ws连接发生错误");
@@ -167,37 +198,45 @@ const initWebSocket = () => {
//连接成功建立的回调方法
socket.onopen = function () {
console.log("ws连接成功");
}
};
//接收到消息的回调方法
socket.onmessage = function (event) {
console.log("服务器返回的信息: ", JSON.parse(event.data));
const type = JSON.parse(event.data).type
const data = JSON.parse(event.data).data
if (type === 'equipment') {
const type = JSON.parse(event.data).type;
const data = JSON.parse(event.data).data;
if (type === "equipment") {
data.forEach((item) => {
if (item.typeKey === 'frequency') {
socketData.leftData = data
} else if (item.typeKey === 'windPressure') {
socketData.windPressure = data
} else if (item.typeKey === 'sensor') {
socketData.sensor = data
if (item.typeKey === "frequency") {
socketData.leftData = data;
} else if (item.typeKey === "windPressure") {
socketData.windPressure = data;
} else if (item.typeKey === "sensor") {
socketData.sensor = data;
}
})
});
}
}
};
//连接关闭的回调方法
socket.onclose = function () {
console.log("ws连接关闭");
// initWebSocket()
}
};
setInterval(() => {
socket.send(JSON.stringify(send))
}, 30000)
}
socket.send(JSON.stringify(send));
}, 30000);
};
const closeSocket = () => {
socket.close();
}
initWebSocket()
};
initWebSocket();
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
#main {
height: 100%;
width: 100%;
#tunnel-box {
height: 100%;
}
}
</style>