更新1.浏览器不点击2.删除风压3.浏览器模型只能左右移动4.鼠标hover显示设备名称

2024-03-13 19:58:51 +08:00
parent 8b073bc98f
commit 9f29b78049
8 changed files with 210 additions and 104 deletions
--- a/public/tunnelModel/chanel-have-wall优化版.gltf
+++ b/public/tunnelModel/chanel-have-wall优化版.gltf
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/src/components/content/tunnelScene/PreviewScene.vue
@@ -19,6 +19,8 @@
                <button @click="handleConfirmAddEqu">确定</button>
            </div>
        </el-dialog>
+
+
    </div>
 </template>

@@ -78,7 +80,7 @@ const modelStore = useModelSceneStore();
 const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理


-
+// console.log(load);
 let isedit = ref(params.isedit)
 let fanData;
 let tunnelAlias = reactive('')
@@ -152,10 +154,10 @@ async function handleMounted() {
    demo = new ThreeDScene(three, content.value);
    //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
    demo.isedit = params.isedit;
-    let tunnelasync = await demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel-have-wall.gltf");
+    let tunnelasync = await demo.loadModel(GLTFLoader, "/tunnelModel/chanel-have-wall-now-use.gltf");
    demo.addOrbitControls(OrbitControls);
    demo.addTween(TWEEN);
-    demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
+    demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
    demo.setDistance(10);
    lClickCallback(demo); //绑定左键回调
    rClickCallback(demo); //绑定右键回调
@@ -228,7 +230,11 @@ function loadModel(path) {
            (obj) => {
                resolve(obj);
            },
-            (xhr) => { },
+            (xhr) => {
+                //这里可以拿到加载的进度条！！！
+                console.log(xhr);
+                console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
+            },
            (err) => {
                reject(err);
            }
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/src/components/content/tunnelScene/TunnelScene.vue
@@ -50,6 +50,7 @@ import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import { onMounted, reactive, ref, toRaw, watch } from "vue";
 import { ElMessage } from "element-plus";
 import { useModelSceneStore } from "@/store/modelSceneStore";
+import { LOD } from "three";
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
@@ -85,12 +86,13 @@ async function handleMounted() {
  demo = new ThreeDScene(three, content.value);
  //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
  demo.isedit = params.isedit;
-
+  // "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
  const loaded = await demo.loadModel(
    GLTFLoader,
-    "./assets/tunnelModel/chanel-have-wall.gltf"
+    "/tunnelModel/chanel-have-wall-now-use.gltf",
+    true
  );
-  demo.addOrbitControls(OrbitControls);
+  demo.addOrbitControls(OrbitControls, true);
  demo.addTween(TWEEN);
  demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
  demo.setDistance(10);
@@ -165,6 +167,8 @@ function editDevInfo(

 //左键/双击左键回调函数
 function lClickCallback(demo) {
+  // console.log('左键点击查看信息');
+
  //demo动态添加函数，为操作组件内部
  function displayDevInfo(targetPoint = null) {
    hasDevice.value = targetPoint.hasDevice;
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue
@@ -4,7 +4,7 @@
      <p>当前距离洞口：{{ pointDistance_str }}</p>
      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
    </div>
-    <div class="equ-info">当前风压:{{ p }}Pa</div>
+    <!-- <div class="equ-info">当前风压:{{ p }}Pa</div> -->
    <div class="setting">
      <div class="setting-item">
        <p>传感器类型</p>
--- a/src/components/content/tunnelScene/preEquComp/preDialog.vue
+++ b/src/components/content/tunnelScene/preEquComp/preDialog.vue
@@ -1,27 +1,27 @@
 <template>
  <div id="edit-dialog">
    <div class="distance-back">
-      <p>当前距离洞口：
+      <!-- <p>当前距离洞口：
        <span>
          {{ pointDistance_str }}
        </span>
-      </p>
+      </p> -->
      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
    </div>
-    <div class="equ-info">当前风压:
+    <!-- <div class="equ-info">当前风压:
      <span>{{ p }}Pa</span>
-    </div>
+    </div> -->
    <div class="setting">
-      <div class="setting-item">
-        <p>传感器类型</p>
+      <!-- <div class="setting-item"> -->
+      <!-- <p>传感器类型</p> -->
      <!-- <el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
          :placeholder="params.equipmentType" disabled>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select> -->
-        <p>{{ params.equipmentType }}</p>
-      </div>
+      <!-- <p>{{ params.equipmentType }}</p> -->
+      <!-- </div> -->
      <div class="setting-item">
-        <p>设备选择</p>
+        <p>设备名称</p>
        <!-- <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
          :placeholder="params.equipmentName" disabled>
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
@@ -172,7 +172,9 @@ const equipment = {

 <style lang="scss" scoped>
 #edit-dialog {
-  width: 540px;
+  // width: 540px;
+  width: 300px;
+  height: 200px;
  // min-height: 683px;
  background: rgba(7, 35, 72, 0.79);
  border-radius: 20px;
--- a/src/components/content/tunnelScene/sceneClass/demo.js
+++ b/src/components/content/tunnelScene/sceneClass/demo.js
@@ -1,5 +1,6 @@
 import { handleLClick } from "./handleRLclick/handleLclick";
 import { handleRClick } from "./handleRLclick/handleRclick";
+import { handleLHover } from "./handleRLclick/handleLhover.js"
 import { handleDBLClick } from "./handleDBLclick";
 import { checkAnimation } from "./checkTag";
 import {
@@ -12,6 +13,7 @@ import { editTunnelInit } from "./editTunnelInit";
 import { addEquipment, removeEquipment } from "./editEquipment";
 import previewtunnelModeInit from "./previewTunnelInit"
 import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js";
+// import { ref } from "vue";
 export default class Demo {
  // 摄像机看向位置s
  origin = null;
@@ -22,6 +24,7 @@ export default class Demo {
  constructor(three, mountedElement) {
    this._StreetSignTag = StreetSignTag
    this._handleLClick = handleLClick;
+    this._handleLHover = handleLHover;
    this._handleRClick = handleRClick;
    this._handleDBLClick = handleDBLClick;
    this._checkAnimation = checkAnimation;
@@ -140,12 +143,14 @@ export default class Demo {
   * @param {Object}  GLTFLoader 模型加载器
   * @param {String} path 模型资源路径
   */
-  loadModel(GLTFLoader, path) {
+  loadModel(GLTFLoader, path, isedit) {
    return new Promise((resolve, reject) => {
      this.gltfloader = new GLTFLoader();
      this.gltfloader.load(
-        "/tunnelModel/chanel-have-wall优化版.gltf",
+        //下面是模型加载的路径
+        path,
        (gltf) => {
+          // console.log(isedit);
          gltf.scene.traverse((child) => {
            this._forModels(child);
          });
@@ -153,7 +158,8 @@ export default class Demo {
          gltf.scene.position.set(-5, 0, 10);
          this.scene.add(gltf.scene);
          // 加载完后可执行函数
-          this._afterLoaded(gltf.scene);
+          // console.log(isedit);
+          this._afterLoaded(gltf.scene, isedit);
          resolve(gltf);
        },
        (xhr) => {
@@ -167,11 +173,15 @@ export default class Demo {
    });
  }
  // 模型加载完函数
-  _afterLoaded() {
+  _afterLoaded(scene, isedit) {
+    console.log(isedit);
    // 可以进行选中
-    this._hoverModel(this.points);
+    this._hoverModel(this.points, isedit);
    // 可以进行点击
+    if (isedit == true) {
+      console.log('dada')
      this._ClickModel(this.points);
+    }
    //将墙壁进行隐藏
    this.WallInit()
    //对路牌进行相关操作
@@ -198,14 +208,21 @@ export default class Demo {
  /**
   * @param {Object} OrbitControls 轨道控制器
   */
-  addOrbitControls(OrbitControls) {
+  addOrbitControls(OrbitControls, isedit) {
    this.orbitControls = new OrbitControls(
      this.camera,
      this.renderer.domElement
    );
    //初始化轨道控制器
    this.orbitControls.object.position.set(-29, 18, -50);
-    this.orbitControls.maxPolarAngle = (4 * Math.PI) / 7;
+    // this.orbitControls.maxPolarAngle = (4 * Math.PI) / 7;
+    //下面的设置是使隧道的上下不进行旋转，只左右旋转即可
+    if (isedit == true) {
+      this.orbitControls.maxPolarAngle = (3.69 * Math.PI) / 7;
+    } else {
+      this.orbitControls.maxPolarAngle = (4 * Math.PI) / 8.5;
+      this.orbitControls.minPolarAngle = (4 * Math.PI) / 8.5;
+    }
    this.orbitControls.minDistance = 5;
    this.orbitControls.maxDistance = 87;
    // 监听控制器变化
@@ -224,7 +241,7 @@ export default class Demo {
   * 鼠标移入可以高亮的模型
   *@param {Array} hoverModels 需要高亮的模型
   */
-  _hoverModel(hoverModels) {
+  _hoverModel(hoverModels, isedit) {
    this.renderer.domElement.addEventListener("mousemove", (e) => {
      const mouse = new this.THREE.Vector2();
      mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
@@ -236,10 +253,17 @@ export default class Demo {
        if (!this.preHover) {
          this.preHover = intersects[0].object;
        } else {
+          if (isedit != true) {
+            console.log(isedit);
+            this._handleLHover(intersects[0].object);
+
+          }
+
          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()
        );
@@ -249,6 +273,10 @@ export default class Demo {
        if (!this.preHover) return;
        this.preHover.material.color.set("white");
      }
+      // this._handleLHover(intersects[0].object);
+      // this._handleLClick(intersects[0].object);
+
+
    });
  }
  /**
@@ -315,7 +343,7 @@ export default class Demo {
  // 添加css3Renderer
  addCSS3Renderer(CSS2Renderer, CSS2DObject, [infoDom, editDom]) {
    this.CSS2Renderer = new CSS2Renderer();
-    this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight);
+    this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight - 100);
    this.CSS2Renderer.render(this.scene, this.camera);

    this.mountedElement.appendChild(this.CSS2Renderer.domElement);
@@ -335,11 +363,16 @@ export default class Demo {
    // // 设置该标签初始化透明
    // this.tagCSS2DObj.element.style.opacity = "1";
    // this.tag2CSS2DObj.element.style.opacity = "1";
-
+    // 下面是3D的，下面把它注释，之后方便来修正
    this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
-
    this.tag3CSS2DObj.scale.set(0.02, 0.02, 0.02); //编辑框
    this.tag3CSS2DObj.position.set(10, 0, 10);
+    // 下面是2D的显示方案
+    // this.tagCSS2DObj.scale.set(0.001, 0.001, 0.001);
+
+
+    // this.tag3CSS2DObj.scale.set(0.001, 0.001, 0.001); //编辑框
+    // this.tag3CSS2DObj.position.set(1, 0, 1);
  }
  clearTagsObj() {
    if (this.preDBLModel) {
--- a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
+++ b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
@@ -0,0 +1,54 @@
+export function handleLHover(targetPoint) {
+  // 保存进入状态
+  this._saveState();
+  this.clearTagsObj();
+  // 全局临时标记该选中的模型;
+  this.targetPoint = targetPoint;
+  const worldPosition = new this.THREE.Vector3();
+  //获取附着点的世界坐标系
+  targetPoint.getWorldPosition(worldPosition);
+  this._checkAnimation(worldPosition);
+
+  // 设置标签位置
+  this.tag3CSS2DObj.position.set(
+    worldPosition.x,
+    worldPosition.y,
+    worldPosition.z
+  );
+  this.isControlOrbit(false);
+  this.position = worldPosition;
+  if (/tr$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(3);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-5);
+    intoAnimation.call(this);
+  } else if (/tl$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(-3);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-5);
+    intoAnimation.call(this);
+  } else if (/tc$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(0);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-6);
+    intoAnimation.call(this);
+  } else if (/br$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(2);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(3);
+    intoAnimation.call(this);
+  } else if (/bl$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(-2);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(3);
+    intoAnimation.call(this);
+  }
+  this.scene.add(this.tag3CSS2DObj);
+  // 返回给编辑组件的回调函数
+  this.editDev(targetPoint);
+}
+
+function intoAnimation() {
+  this.tag3CSS2DObj.element.style.opacity = "1";
+  this.tag3CSS2DObj.element.style.display = "block";
+}
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -37,6 +37,7 @@
    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
      :largeScreen="largeScreen"></preview-scene>
+    <!-- <el-process></el-process> -->
    <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">
@@ -73,8 +74,7 @@
    </div>
  </div>
  <div class="alarm-dialog digital-tunnel">
-    <el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情"
-               width="1500px">
+    <el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情" width="1500px">
      <div class="detail">
        <div>报警时间：</div>
        {{ alarmDetail.alarmTime }}
@@ -86,9 +86,7 @@
    </el-dialog>
  </div>
  <div class="digital-tunnel">
-    <el-dialog :close-on-click-modal="false" v-model="isVisited" title="报警信息"
-               width="2175px"
-               :modal="false">
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" title="报警信息" width="2175px" :modal="false">
      <div class="left-top-icon"></div>
      <div class="right-top-icon"></div>
      <el-form :model="queryParams" inline class="query-form" ref="queryForm" @submit.prevent="getAlarmList"
@@ -119,12 +117,14 @@
          <el-table-column prop="alarmTime" label="告警时间" align="center" width="480px" />
          <el-table-column prop="lookupStatus" label="查阅状态" align="center" width="200px"
            v-if="roleKey !== 'administrator'">
+
            <template #default="scope">
              <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'">{{ scope.row.lookupStatus ? '已读' : '未读' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="300px">
+
            <template #default="scope">
              <el-button type="primary" size="mini" style="font-weight: bold" @click="handleView(scope.row)" link>详情
              </el-button>
@@ -682,12 +682,15 @@ const initWebSocket = () => {
  height: 90px;

 }
+
 :deep(.el-table--fit) {
  width: auto;
  //height: 600px;
  background-color: transparent !important;
+
  .el-loading-mask {
    background: rgba(6, 34, 71, 0.78);
+
    .el-loading-spinner {
      .circular {
        width: 150px;
@@ -699,6 +702,7 @@ const initWebSocket = () => {

 :deep(.el-table__empty-block) {
  height: 200px !important;
+
  //display: none;
  .el-table__empty-text {
    font-size: 60px;
@@ -793,7 +797,8 @@ const initWebSocket = () => {
        }
      }

-      .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+      .el-select-dropdown__item.hover,
+      .el-select-dropdown__item:hover {
        background-color: #064B66 !important;
      }
    }
@@ -933,7 +938,9 @@ const initWebSocket = () => {
  font-weight: bold;

  :deep(.el-pagination.is-background) {
-    .btn-next,.btn-prev {
+
+    .btn-next,
+    .btn-prev {
      background-color: transparent;
    }