初始化功能大致完成

This commit is contained in:
Hcat1314
2023-12-17 18:20:07 +08:00
parent 907f4cc220
commit 946fe551a1
5 changed files with 92 additions and 81 deletions

View File

@@ -84,6 +84,9 @@ async function handleMounted() {
} catch (err) {
console.log(err);
}
demo.tunnelModeInit();
}
// 每个模型加载回调
@@ -216,45 +219,32 @@ function handleCancel() {
const ThreeConfig = {
code: 0,
data: {
tunnelThreeConfig: {
fan: ['point_005_tl', 'point_009_bl'],
sensors: ['point_018_br', 'point_021_bl'],
}
tunnelThreeConfig: [{
equipmentId: 'fan_01',//传感器id
equipmentName: '01',//设备名称
pointName: 'point_005_tl',//附着点名称(定位)
equipmentType: 'fan',//设备类型(类型可根据后端
equipmentValue: 23, //设备存的值
}, {
equipmentId: 'sensors_01',//传感器id
equipmentName: '01',//设备名称
pointName: 'point_009_bl',//附着点名称(定位)
equipmentType: 'sensors',//设备类型(类型可根据后端
equipmentValue: 67, //设备存的值
}],
},
msg: "dda",
msg: "dda"
}
[{ type: 'fan', point: '' }, {}]
// fan: ['point_005_tl', 'point_009_bl'],
// sensors: ['point_018_br', 'point_021_bl'],
// }
const tunnelConfigEquipment = ThreeConfig.data.tunnelThreeConfig
const tunnelKeys = Object.keys(tunnelConfigEquipment);
console.log(tunnelKeys);
//取值方便操作
// const tunnelConfigEquipment = ThreeConfig.data.tunnelThreeConfig
function tunnelModeInit() {
for (let key in ThreeConfig.data.tunnelThreeConfig) {
if (ThreeConfig.data.tunnelThreeConfig.hasOwnProperty(key)) {
switch (key) {
case 'fan':
ThreeConfig.data.tunnelThreeConfig.fan.forEach(fan => {
// 对 fan 进行操作
console.log(fan);
});
break;
case 'sensors':
ThreeConfig.data.tunnelThreeConfig.sensors.forEach(sensor => {
// 对 sensor 进行操作
console.log(sensor);
});
break;
default:
// 处理其他键值对
console.log(key, ThreeConfig.data.tunnelThreeConfig[key]);
}
}
}
}
tunnelModeInit()
// function tunnelModeInit() {
// for (const item of tunnelConfigEquipment) {
// let pointmodel = demo.scene.getobjectByName(item.pointName)
// console.log(pointmodel);
// }
// }
// tunnelModeInit()
</script>

View File

@@ -1,12 +1,7 @@
<template>
<div id="input-num">
<p>{{ params.name }}</p>
<input
type="text"
:placeholder="params.placeholder"
@input="handleChange"
:disabled="params.disabled"
/>
<input type="text" :placeholder="params.placeholder" @input="handleChange" :disabled="params.disabled" />
</div>
</template>
@@ -34,6 +29,7 @@ function handleUnmounted() {
<style lang="scss" scoped>
#input-num {
margin: 40px 30px 0px 30px;
P {
width: 130px;
height: 35px;
@@ -42,6 +38,7 @@ function handleUnmounted() {
color: #ffffff;
line-height: 35px;
}
input {
width: 284px;
height: 51px;
@@ -55,6 +52,7 @@ function handleUnmounted() {
padding: 0px 10px;
overflow: hidden;
}
::placeholder {
color: #0f82af;
}

View File

@@ -2,54 +2,25 @@
<div id="edit-dialog">
<div class="distance-back">
<p>当前距离洞口{{ pointDistance_str }}</p>
<img
src="/images/htmlEditDialog/back-icon.png"
alt=""
@click="handleCancel"
/>
<img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
</div>
<div class="equ-info">当前风压:{{ p }}Pa</div>
<div class="setting">
<div class="setting-item">
<p>传感器类型</p>
<el-select
v-model="equipmentSetting.equipmentType"
:fit-input-width="true"
filterable
clearable
placeholder="请选择设备类型"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
placeholder="请选择设备类型">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="setting-item">
<p>设备选择</p>
<el-select
v-model="equipmentSetting.chooseEquipment"
:fit-input-width="true"
filterable
clearable
placeholder="请选择设备类型"
>
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
placeholder="请选择设备类型">
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<input-num
name="阈值"
placeholder="请输入阈值"
@inputValue="handelInput"
:disabled="isDisabledInputNum"
/>
<input-num name="阈值" placeholder="请输入阈值" @inputValue="handelInput" :disabled="isDisabledInputNum" />
</div>
<div class="btn">
<button @click="removeEquipment">删除</button>
@@ -80,8 +51,7 @@ let p = ref(57);
//计算锚点之间距离
const pointDistance_str = computed(
() =>
`${params.pointGap}米*${params.pointNum}=${
params.pointGap * params.pointNum
`${params.pointGap}米*${params.pointNum}=${params.pointGap * params.pointNum
}`
);
@@ -183,11 +153,13 @@ const equipment = {
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;
@@ -196,13 +168,16 @@ const equipment = {
color: #ffffff;
line-height: 35px;
}
img {
cursor: pointer;
}
img:active {
transform: scale(0.9);
}
}
.equ-info {
width: 190px;
height: 35px;
@@ -212,6 +187,7 @@ const equipment = {
line-height: 35px;
margin: 20px 30px 0px 30px;
}
.setting {
.setting-item {
padding: 30px 30px 10px 30px;
@@ -226,23 +202,27 @@ const equipment = {
margin-bottom: 20px;
}
}
:deep(.el-select) {
width: 284px;
//height: 51px;
border: transparent;
}
:deep(.el-input--suffix) {
width: 284px;
height: 51px;
background: rgba(7, 35, 72, 0.79);
border: 2px solid #0f82af;
}
:deep(.el-input__wrapper) {
background: transparent;
border: none !important;
padding: 0px 12px 0px 10px;
box-shadow: none !important;
}
:deep(.el-input__wrapper input) {
background: transparent;
height: 100%;
@@ -251,19 +231,23 @@ const equipment = {
color: #08b7b8;
line-height: 37px;
}
:deep(.el-icon) {
color: #05feff;
font-size: 34px;
}
}
.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;
@@ -275,6 +259,7 @@ const equipment = {
color: #08b7b8;
line-height: 60px;
}
& :nth-child(2) {
width: 190px;
height: 60px;
@@ -286,6 +271,7 @@ const equipment = {
color: #ffffff;
line-height: 60px;
}
button:active {
transform: scale(0.9);
}

View File

@@ -487,4 +487,38 @@ export default class Demo {
opacityTween(0.1, 0.5, true);
}
}
ThreeConfig = {
code: 0,
data: {
tunnelThreeConfig: [{
equipmentId: 'fan_01',//传感器id
equipmentName: '01',//设备名称
pointName: 'point_005_tl',//附着点名称(定位)
equipmentType: 'fan',//设备类型(类型可根据后端
equipmentValue: 23, //设备存的值
}, {
equipmentId: 'sensors_01',//传感器id
equipmentName: '01',//设备名称
pointName: 'point_009_bl',//附着点名称(定位)
equipmentType: 'sensors',//设备类型(类型可根据后端
equipmentValue: 67, //设备存的值
}],
},
msg: "dda"
}
tunnelConfigEquipment = this.ThreeConfig.data.tunnelThreeConfig
tunnelModeInit() {
for (const item of this.tunnelConfigEquipment) {
//使用api取拿到附着点
let pointmodel = this.scene.getObjectByName(item.pointName)
let formInfo = {
equipmentType: item.equipmentType, //设备类型
chooseEquipment: item.equipmentName, //设备选择(设备名称)
threshold: item.equipmentValue, //阈值
}
this.addEquipment(pointmodel, formInfo);
}
}
}

View File

@@ -4,6 +4,9 @@ import EquipmentTag from "../utils/EquipmentTag";
* @param {Mesh} targetPoint
* @param {String} equType "fan" "sensors"
*/
//formInfo需要的信息这里包括了
//equipmentType、
function addEquipment(targetPoint, formInfo) {
if (targetPoint.hasDevice) {
alert("已添加设备");