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

public/tunnelModel/chanel.gltf

@@ -7,7 +7,7 @@
     {
       "name": "Scene",
       "nodes": [
-        246
+        247
       ]
     }
   ],
@@ -80,7 +80,7 @@
         0,
         1
       ],
-      "name": "Cylinder001",
+      "name": "chanel",
       "extras": {
         "name": "Cylinder001"
       },
@@ -128,7 +128,7 @@
         0,
         1
       ],
-      "name": "Box002",
+      "name": "chanel",
       "extras": {
         "name": "Box002"
       },
@@ -176,7 +176,7 @@
         0,
         1
       ],
-      "name": "Box003",
+      "name": "chanel",
       "extras": {
         "name": "Box003"
       },
@@ -224,7 +224,7 @@
         0,
         1
       ],
-      "name": "Box004",
+      "name": "chanel",
       "extras": {
         "name": "Box004"
       },
@@ -5918,7 +5918,10 @@
       ]
     },
     {
-      "name": "chanel.glb",
+      "name": "chanelglb",
+      "extras": {
+        "name": "chanel.glb"
+      },
       "children": [
         1,
         3,
@@ -6044,6 +6047,12 @@
         243,
         245
       ]
+    },
+    {
+      "name": "chanel.gltf",
+      "children": [
+        246
+      ]
     }
   ],
   "bufferViews": [

src/App.vue

@@ -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",
-      }
+      },
     ],
   });
 });

src/components/content/tunnelScene/TunnelScene.vue

@@ -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 { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import EditDev from "./childComp/EditDev.vue";
 import { onMounted, reactive, ref } from "vue";
 
-import { ElMessage } from "element-plus";
+// 获取html标签跟随组件dom
-// 获取html标签跟随组件
 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); //左键回调
+  lClickCallback(demo); //绑定左键回调
-  rClickCallback(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/sensor.glb");
-    result = await loadModel("/devicesModel/fan.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);
-    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) {
+function handleAddEqu() {
-  if (!demo) {
+  console.log("添加", pointInfo);
-    //  处理未加载完场景情况
-    console.info("3D场景正在渲染，请稍后操作");
-    return;
-  }
-  const tempDevInfo = demo.addDev(devInfo);
-  hasDevice.value = true;
-  editDevInfo(tempDevInfo);
-  ElMessage({
-    message: "添加成功",
-    type: "success",
-  });
 }
 
 // 删除设备
-async function handleRemoveDev() {
+async function handleRemoveEqu() {
-  const result = await demo.removeDev(devInfo.meshId);
+  // const result = await demo.removeDev(devInfo.meshId);
-  if (result === "ok") {
+  // if (result === "ok") {
-    hasDevice.value = false;
+  //   hasDevice.value = false;
-    editDevInfo();
+  //   editDevInfo();
-    ElMessage({
+  //   ElMessage({
-      message: "删除成功",
+  //     message: "删除成功",
-      type: "success",
+  //     type: "success",
-    });
+  //   });
-  }
+  // }
+  console.log("删除");
+}
+
+// 处理取消关闭编辑框事件
+function handleCancel() {
+  if (!demo) return;
+  // 关闭标签
+  demo.isControlOrbit(true);
+  demo.clearTagsObj();
 }
 </script>
 
 <style lang="scss" scope>
 #scene {
   position: relative;
-  height: 100vh;
+  height: 100%;
-  width: 100vw;
+  width: 100%;
+  #cvs {
+    height: 100%;
+  }
 }
 </style>

src/components/content/tunnelScene/childComp/EditDev.vue

@@ -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>

src/components/content/tunnelScene/editEquComp/childComps/InputNum.vue

@@ -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>

src/components/content/tunnelScene/editEquComp/childComps/SelectInput.vue

@@ -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>

src/components/content/tunnelScene/editEquComp/editDialog.vue

@@ -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>

src/components/content/tunnelScene/sceneClass/addDev/index.js

@@ -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("_"))
+    (Number(
-  ) +
+      position.substring(position.indexOf("_") + 1, position.lastIndexOf("_"))
-    1) *
+    ) +
-  distance
+      1) *
-    }米处`;
+    distance
+  }米处`;
 }
 
 function equal(str) {

src/components/content/tunnelScene/sceneClass/addDevice/index.js

@@ -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: "摄像头",

src/components/content/tunnelScene/sceneClass/demo.js

@@ -45,9 +45,9 @@ export default class Demo {
       1000
     );
 
-    this.camera.position.z = -60;
+    this.camera.position.z = 1.24;
-    this.camera.position.y = 20;
+    this.camera.position.y = 9.14;
-    this.camera.position.x = -30;
+    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.scale.set(0.025, 0.025, 0.025); //编辑框
-    this.tag3CSS2DObj.position.y = 1000;
+    this.tag3CSS2DObj.position.set(10, 0, 10);
-
+    this.tagCSS2DObj.scale.set(0.5, 0.5, 0.5);
-
-    this.tagCSS2DObj.scale.set(3, 3, 3);
-
   }
-
-
   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) {
+  loadBackground(hdrLoader, backColorSet) {
-    this.scene.background = new this.THREE.TextureLoader().load("/images/background/background.png", function (texture) {
+    // hdrLoader.load("/images/background/background.hdr", (texture) => {
-      texture.encoding = backColorSet;
+    //   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);
+    }
   }
 }

src/components/content/tunnelScene/sceneClass/handleDBLclick/index.js

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

src/components/content/tunnelScene/sceneClass/handleOrbitControlsChange/index.js

@@ -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);
 }

src/components/content/tunnelScene/sceneClass/handleRLclick/handleLclick.js

@@ -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(
+  // this.tag2CSS2DObj.position.set(
-    worldPosition.x,
+  //   worldPosition.x,
-    worldPosition.y,
+  //   worldPosition.y,
-    worldPosition.z
+  //   worldPosition.z
-  );
+  // );
   // 标签定位
   this.tag2CSS2DObj.translateY(-15);
   this.tag2CSS2DObj.translateX(15);

src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js

@@ -14,18 +14,20 @@ export function handleRClick(targetPoint) {
     worldPosition.y,
     worldPosition.z
   );
-  this.tag3CSS2DObj.translateY(-15);
+  this.isControlOrbit(false);
-  this.tag3CSS2DObj.translateX(15);
+
+  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,
+      x: worldP.x - 10,
-      y: worldP.y + 20,
+      y: worldP.y + 3,
-      z: worldP.z + 50,
+      z: worldP.z - 12,
       xTarget: worldP.x,
       yTarget: worldP.y,
       zTarget: worldP.z,

src/components/content/tunnelScene/sceneClass/removeDevice/index.js

@@ -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;
-  }
-}

src/components/content/tunnelScene/utils/toImg.js

@@ -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();
+}

src/views/tunnel/index.vue

@@ -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"
+      <el-drawer
-                 :close-on-click-modal="false" :close-on-press-escape="false">
+        v-model="drawerLeft"
-        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"/>
+        direction="ltr"
-        <transducer-list :list="socketData.leftData"  :transducer-data="largeScreenData"/>
+        modal-class="modal-box"
-        <used-ele :list="socketData.leftData" :ele-data="largeScreenData"/>
+        :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"
+        v-model="drawerRight"
-          direction="rtl"
+        direction="rtl"
-          modal-class="modal-box"
+        modal-class="modal-box"
-          :modal="false"
+        :modal="false"
-          :show-close="false"
+        :show-close="false"
-          :close-on-click-modal="false"
+        :close-on-click-modal="false"
-          :close-on-press-escape="false"
+        :close-on-press-escape="false"
       >
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
+        <wind-pressure-list
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
+          v-if="showFan"
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData"/>
+          :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 { dateFormat } from "@/utils/date.js";
-import {onMounted} from "vue";
+import { onMounted } from "vue";
-import {getToken} from "@/utils/auth";
+import { getToken } from "@/utils/auth";
-import {useAuthStore} from '@/store/userstore.js'
+import { useAuthStore } from "@/store/userstore.js";
-import {getLargeScreen} from "@/api/largeScreen";
+import { getLargeScreen } from "@/api/largeScreen";
 
-const authStore = useAuthStore()
+const authStore = useAuthStore();
-const router = useRouter()
+const router = useRouter();
-const selectIndex = ref(1)
+const selectIndex = ref(1);
-const showFan = ref(false)
+const showFan = ref(false);
-const drawerLeft = ref(true)
+const drawerLeft = ref(true);
-const drawerRight = ref(true)
+const drawerRight = ref(true);
-const currentSite = ref('松江站')
+const currentSite = ref("松江站");
-const currentUser = ref('admin')
+const currentUser = ref("admin");
-const currentDate = ref(dateFormat())
+const currentDate = ref(dateFormat());
-const tunnelBtn = ref()
+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: '六号隧道'
+    name: "六号隧道",
-  }
+  },
-])
+]);
-let socket = reactive('')
+let socket = reactive("");
-const serialNumber = ref('SC00DY00GH00ELBT')
+const serialNumber = ref("SC00DY00GH00ELBT");
 let token = getToken();
 let send = {
-  type: "ping"
+  type: "ping",
-}
+};
-const largeScreenData = ref(null)
+const largeScreenData = ref(null);
 const socketData = reactive({
   leftData: [],
   windPressure: [],
   sensor: [],
-})
+});
 
 onMounted(() => {
   nextTick(() => {
-    showFan.value = true
+    showFan.value = true;
-  })
+  });
-  getScreenInfo()
+  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()
+  authStore.userLogout();
-  router.push('/login')
+  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}`
+  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
-  console.log(wsUrl)
+  console.log(wsUrl);
-  socket = new WebSocket(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 type = JSON.parse(event.data).type;
-    const data = JSON.parse(event.data).data
+    const data = JSON.parse(event.data).data;
-    if (type === 'equipment') {
+    if (type === "equipment") {
       data.forEach((item) => {
-        if (item.typeKey === 'frequency') {
+        if (item.typeKey === "frequency") {
-          socketData.leftData = data
+          socketData.leftData = data;
-        } else if (item.typeKey === 'windPressure') {
+        } else if (item.typeKey === "windPressure") {
-          socketData.windPressure = data
+          socketData.windPressure = data;
-        } else if (item.typeKey === 'sensor') {
+        } else if (item.typeKey === "sensor") {
-          socketData.sensor = data
+          socketData.sensor = data;
         }
-      })
+      });
     }
-  }
+  };
   //连接关闭的回调方法
   socket.onclose = function () {
     console.log("ws连接关闭");
     // initWebSocket()
-  }
+  };
   setInterval(() => {
-    socket.send(JSON.stringify(send))
+    socket.send(JSON.stringify(send));
-  }, 30000)
+  }, 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>