Merge pull request '廖杰：完成预览模式下鼠标离开设备，面板自动消失，调整面板字体，设备选中的箭头优化' (#331) from liaojie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/331
2024-03-18 11:27:45 +00:00
parent b90d5d5911 9e3d896259
commit 0e23e31457
5 changed files with 100 additions and 107 deletions
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -1,28 +1,16 @@
 <template>
-  <div
-      id="bad-gas-info"
-      :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
+  <div id="bad-gas-info" :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
    <div class="title">有害气体</div>
    <div v-if="badGasList == null || badGasList.length === 0" class="showNull">
      <div class="loading" v-if="loading === 0"></div>
      {{ loading === 0 ? '加载中...' : '暂无数据~' }}
    </div>
    <div v-else class="info-list" @click="handleOpenChart">
-      <gas-info-item
-          v-for="item in badGasList"
-          :key="item.equipmentId"
-          :gasInfo="item"
-      />
+      <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" />
    </div>
    <div class="digital-tunnel">
-      <el-dialog
-          :close-on-click-modal="false"
-          v-model="isBadGasVisited"
-          title="有害气体监控数据"
-          width="2175px"
-          :modal="false"
-          id="badDialog"
-      >
+      <el-dialog :close-on-click-modal="false" v-model="isBadGasVisited" title="有害气体监控数据" width="2175px" :modal="false"
+        id="badDialog">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="loading-block" v-if="showLoading">
@@ -39,11 +27,7 @@
          </div>
          <choose-dates v-if="selectTimeButton === 2" ref="chooseDayRef" @select="daySelect" />
          <choose-month v-if="selectTimeButton === 1" ref="chooseMonthRef" @select="monthSelect" />
-          <time-range-btn
-              :buttonList="timeList"
-              v-model="selectTimeButton"
-              @select="timeSelect"
-          />
+          <time-range-btn :buttonList="timeList" v-model="selectTimeButton" @select="timeSelect" />
        </div>
        <div class="change-screen">
          <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/src/components/content/tunnelScene/PreviewScene.vue
@@ -88,10 +88,10 @@ let tunnelAlias = reactive('')
 watch(
    () => params.largeScreen,
    (now) => {
-        console.log(params.largeScreen);
+        // console.log(params.largeScreen);
        params.largeScreen = now;
        fanData = (toRaw(params.largeScreen.value)).frequencyChangerList;
-        console.log(fanData);
+        // console.log(fanData);
    },
    { deep: true }
 );
@@ -101,7 +101,7 @@ const getTunnel = () => {
        getTunnelDetail(params.tunnelId).then((res) => {
            if (res?.code === 1000) {
                form.value = res.data;
-                console.log(form.value.tunnelAlias);
+                // console.log(form.value.tunnelAlias);
                tunnelAlias = form.value.tunnelAlias
            }
        });
@@ -232,7 +232,7 @@ function loadModel(path) {
            },
            (xhr) => {
                //这里可以拿到加载的进度条！！！
-                console.log(xhr);
+                // console.log(xhr);
                console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
            },
            (err) => {
--- a/src/components/content/tunnelScene/preEquComp/preDialog.vue
+++ b/src/components/content/tunnelScene/preEquComp/preDialog.vue
@@ -1,13 +1,13 @@
 <template>
  <div id="edit-dialog">
-    <div class="distance-back">
+    <!-- <div class="distance-back"> -->
    <!-- <p>当前距离洞口：
        <span>
          {{ pointDistance_str }}
        </span>
      </p> -->
-      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
-    </div>
+    <!-- <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" /> -->
+    <!-- </div> -->
    <!-- <div class="equ-info">当前风压:
      <span>{{ p }}Pa</span>
    </div> -->
@@ -173,8 +173,8 @@ const equipment = {
 <style lang="scss" scoped>
 #edit-dialog {
  // width: 540px;
-  width: 300px;
-  height: 200px;
+  width: 190px;
+  height: 150px;
  // min-height: 683px;
  background: rgba(7, 35, 72, 0.79);
  border-radius: 20px;
@@ -235,7 +235,7 @@ const equipment = {
      p {
        width: 190px;
        height: 35px;
-        font-size: 26px;
+        font-size: 18px;
        font-family: MicrosoftYaHei;
        color: #ffffff;
        line-height: 35px;
--- a/src/components/content/tunnelScene/sceneClass/demo.js
+++ b/src/components/content/tunnelScene/sceneClass/demo.js
@@ -174,7 +174,7 @@ export default class Demo {
  }
  // 模型加载完函数
  _afterLoaded(scene, isedit) {
-    console.log(isedit);
+    // console.log(isedit);
    // 可以进行选中
    this._hoverModel(this.points, isedit);
    // 可以进行点击
@@ -254,9 +254,10 @@ export default class Demo {
          this.preHover = intersects[0].object;
        } else {
          if (isedit != true) {
-            console.log(isedit);
+            // console.log(isedit);
+            //附着点设置方框
+            this.setBoxHelper(intersects[0].object);
            this._handleLHover(intersects[0].object);
-
          }

          this.preHover.material.color.set("white");
@@ -267,10 +268,17 @@ export default class Demo {
        const tagP = intersects[0].object.getWorldPosition(
          new this.THREE.Vector3()
        );
-
+        // if (isedit != false) {
        this._checkAnimation(tagP);
+
+        // }
      } else {
        if (!this.preHover) return;
+        //当鼠标移出的时候，将轨道控制器打开，并且将面板关闭
+        if (isedit != true) {
+          this.isControlOrbit(true)
+          this.clearTagsObj(isedit)
+        }
        this.preHover.material.color.set("white");
      }
      // this._handleLHover(intersects[0].object);
@@ -374,7 +382,8 @@ export default class Demo {
    // this.tag3CSS2DObj.scale.set(0.001, 0.001, 0.001); //编辑框
    // this.tag3CSS2DObj.position.set(1, 0, 1);
  }
-  clearTagsObj() {
+  // 让面板消失的函数
+  clearTagsObj(isedit) {
    if (this.preDBLModel) {
      this.preDBLModel.remove(this.tagCSS2DObj);
    }
@@ -383,7 +392,7 @@ export default class Demo {
    this.scene.remove(this.tag3CSS2DObj);
    this.tag3CSS2DObj.element.style.opacity = "0";
    // 删除标记动画
-    this.scene.remove(this.group);
+    // this.scene.remove(this.group);
  }

  // 附着点选中线宽包围
--- a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
+++ b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
@@ -1,7 +1,7 @@
 export function handleLHover(targetPoint) {
  // 保存进入状态
  this._saveState();
-  this.clearTagsObj();
+  // this.clearTagsObj();
  // 全局临时标记该选中的模型;
  this.targetPoint = targetPoint;
  const worldPosition = new this.THREE.Vector3();