From 9e3d89625999db19fe2bbed687cc76e74912d32c Mon Sep 17 00:00:00 2001
From: Hcat <2768237203@qq.com>
Date: Mon, 18 Mar 2024 19:26:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BB=96=E6=9D=B0=EF=BC=9A=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=A8=A1=E5=BC=8F=E4=B8=8B=E9=BC=A0=E6=A0=87?=
 =?UTF-8?q?=E7=A6=BB=E5=BC=80=E8=AE=BE=E5=A4=87=EF=BC=8C=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=B6=88=E5=A4=B1=EF=BC=8C=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E5=AD=97=E4=BD=93=EF=BC=8C=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E7=9A=84=E7=AE=AD=E5=A4=B4=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../content/badGasInfo/BadGasInfo.vue         | 162 ++++++++----------
 .../content/tunnelScene/PreviewScene.vue      |   8 +-
 .../tunnelScene/preEquComp/preDialog.vue      |  14 +-
 .../content/tunnelScene/sceneClass/demo.js    |  21 ++-
 .../sceneClass/handleRLclick/handleLhover.js  |   2 +-
 5 files changed, 100 insertions(+), 107 deletions(-)

diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue
index 45b0195..0062e91 100644
--- 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>
+    <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">
@@ -37,18 +25,14 @@
           <div class="export-btn" @click="handleExport">
             导出
           </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"
-          />
+          <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" />
         </div>
         <div class="change-screen">
           <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
-                   v-if="isFullScreen">
-            <FullScreen/>
+            v-if="isFullScreen">
+            <FullScreen />
           </el-icon>
           <div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
         </div>
@@ -63,12 +47,12 @@
 import GasInfoItem from "./childComps/GasInfoItem.vue";
 import * as echarts from "echarts";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
-import {getBadGasEchartsInfo} from "@/api/largeScreen";
+import { getBadGasEchartsInfo } from "@/api/largeScreen";
 import ChooseDates from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import elementResizeDetectorMaker from "element-resize-detector";
 
-import {getNowFormatDate} from "@/utils/date.js";
+import { getNowFormatDate } from "@/utils/date.js";
 import CsvExportor from "csv-exportor";
 
 const props = defineProps({
@@ -92,37 +76,37 @@ const clickMonth = ref('')
 const clickDay = ref('')
 const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
 watch(
-    () => props.list,
-    (now) => {
-      badGasList.value?.forEach((item) => {
-        now.forEach((newItem) => {
-          if (item.equipmentId === newItem.equipmentId) {
-            item.value = newItem.value;
-          }
-        });
+  () => props.list,
+  (now) => {
+    badGasList.value?.forEach((item) => {
+      now.forEach((newItem) => {
+        if (item.equipmentId === newItem.equipmentId) {
+          item.value = newItem.value;
+        }
       });
-    },
-    {deep: true}
+    });
+  },
+  { deep: true }
 );
 
 watch(
-    () => props.badGasData,
-    (now) => {
-      if (now.sensorList === null) {
-        badGasList.value = []
-      } else {
-        getBadGasInfo(now.sensorList);
-      }
-    },
-    {deep: true}
+  () => props.badGasData,
+  (now) => {
+    if (now.sensorList === null) {
+      badGasList.value = []
+    } else {
+      getBadGasInfo(now.sensorList);
+    }
+  },
+  { deep: true }
 );
 
 watch(
-    () => props.tunnelId,
-    (now) => {
-      props.tunnelId = now
-    },
-    {deep: true}
+  () => props.tunnelId,
+  (now) => {
+    props.tunnelId = now
+  },
+  { deep: true }
 );
 //导出csv
 const handleExport = () => {
@@ -135,23 +119,23 @@ const handleExport = () => {
   let sulfurDioxideUnit
   let hydrogenSulfideUnit
   badGasList.value.forEach((item) => {
-    if(item.name==='粉尘'){
-      dustUnit=item.unit
-    }else if(item.name==='二氧化碳'){
-      carbonUnit=item.unit
-    }else if(item.name==='一氧化碳'){
-      carbonMonoxideUnit=item.unit
-    }else if(item.name==='二氧化氮'){
-      nitrogenUnit=item.unit
-    }else if(item.name==='一氧化氮'){
-      sulfurMonoxideUnit=item.unit
-    }else if(item.name==='二氧化硫'){
-      sulfurDioxideUnit=item.unit
-    }else if(item.name==='硫化氢'){
-      hydrogenSulfideUnit=item.unit
+    if (item.name === '粉尘') {
+      dustUnit = item.unit
+    } else if (item.name === '二氧化碳') {
+      carbonUnit = item.unit
+    } else if (item.name === '一氧化碳') {
+      carbonMonoxideUnit = item.unit
+    } else if (item.name === '二氧化氮') {
+      nitrogenUnit = item.unit
+    } else if (item.name === '一氧化氮') {
+      sulfurMonoxideUnit = item.unit
+    } else if (item.name === '二氧化硫') {
+      sulfurDioxideUnit = item.unit
+    } else if (item.name === '硫化氢') {
+      hydrogenSulfideUnit = item.unit
     }
   });
-  const header = ['时间', `粉尘(${dustUnit})`, `二氧化碳(${carbonUnit})`, `一氧化碳(${carbonMonoxideUnit})`,`二氧化氮(${nitrogenUnit})`,`一氧化氮(${sulfurMonoxideUnit})`,`二氧化硫(${sulfurDioxideUnit})`,`硫化氢(${hydrogenSulfideUnit})`];
+  const header = ['时间', `粉尘(${dustUnit})`, `二氧化碳(${carbonUnit})`, `一氧化碳(${carbonMonoxideUnit})`, `二氧化氮(${nitrogenUnit})`, `一氧化氮(${sulfurMonoxideUnit})`, `二氧化硫(${sulfurDioxideUnit})`, `硫化氢(${hydrogenSulfideUnit})`];
   let newArray = []
   chartData.dates.forEach((item, index) => {
     let obj = {
@@ -188,7 +172,7 @@ const handleExport = () => {
     time = new Date().getFullYear() + '年'
   }
   const name = '有害气体监控数据-' + time
-  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+  CsvExportor.downloadCsv(newArray, { header }, `${name}.csv`);
 }
 //放大弹窗
 const handleFullScreen = () => {
@@ -224,11 +208,11 @@ const daySelect = (val) => {
   if (val) {
     clickDay.value = val
     if (isFullScreen.value) {
-      getBadGasChartInfo('day', '','', val[0], val[1])
+      getBadGasChartInfo('day', '', '', val[0], val[1])
     } else {
       getBadGasChartInfo('day', '', true, val[0], val[1])
     }
-  }else {
+  } else {
     if (isFullScreen.value) {
       getBadGasChartInfo('day', '')
     } else {
@@ -267,13 +251,13 @@ const getBadGasInfo = (now) => {
   let windPressureArr = [];
   now?.map((item) => {
     if (
-        item.equipmentType === "dust" ||
-        item.equipmentType === "carbonDioxide" ||
-        item.equipmentType === "carbonMonoxide" ||
-        item.equipmentType === "hydrogenSulfide" ||
-        item.equipmentType === "sulfurDioxide" ||
-        item.equipmentType === "sulfurMonoxide" ||
-        item.equipmentType === "nitrogenDioxide"
+      item.equipmentType === "dust" ||
+      item.equipmentType === "carbonDioxide" ||
+      item.equipmentType === "carbonMonoxide" ||
+      item.equipmentType === "hydrogenSulfide" ||
+      item.equipmentType === "sulfurDioxide" ||
+      item.equipmentType === "sulfurMonoxide" ||
+      item.equipmentType === "nitrogenDioxide"
     ) {
       windPressureObj = changeData(item);
       windPressureArr.push(windPressureObj);
@@ -291,7 +275,7 @@ const changeData = (item) => {
     unit: item.unit,
   };
 };
-const getBadGasChartInfo = (type, time = '', flag,startTime,endTime) => {
+const getBadGasChartInfo = (type, time = '', flag, startTime, endTime) => {
   showLoading.value = true
   let id = props.tunnelId
   nextTick(() => {
@@ -304,7 +288,7 @@ const getBadGasChartInfo = (type, time = '', flag,startTime,endTime) => {
       }
     }
   })
-  getBadGasEchartsInfo(id, time, type,startTime,endTime).then(res => {
+  getBadGasEchartsInfo(id, time, type, startTime, endTime).then(res => {
     if (res?.code === 1000) {
       showLoading.value = false
       chartData = res.data
@@ -343,7 +327,7 @@ const handleOpenChart = () => {
 };
 const getImageUrl = (name) => {
   return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
-      .href;
+    .href;
 };
 /**
  * 初始化echarts实例方法
@@ -407,15 +391,15 @@ const initChart = (type, values, top) => {
     dataZoom: [{
       type: 'inside'
     },
-      {
-        type: 'slider',
-        top: top,
-        height: 100,
-        textStyle: {
-          fontSize: 45,
-          color: '#fffff'
-        }
+    {
+      type: 'slider',
+      top: top,
+      height: 100,
+      textStyle: {
+        fontSize: 45,
+        color: '#fffff'
       }
+    }
     ],
     //X轴
     xAxis: {
diff --git a/src/components/content/tunnelScene/PreviewScene.vue b/src/components/content/tunnelScene/PreviewScene.vue
index cbca21b..782d826 100644
--- 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) => {
diff --git a/src/components/content/tunnelScene/preEquComp/preDialog.vue b/src/components/content/tunnelScene/preEquComp/preDialog.vue
index a4a3c0c..e28c042 100644
--- 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">
-      <!-- <p>当前距离洞口：
+    <!-- <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;
diff --git a/src/components/content/tunnelScene/sceneClass/demo.js b/src/components/content/tunnelScene/sceneClass/demo.js
index e9a3881..d6d7517 100644
--- 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);
   }
 
   // 附着点选中线宽包围
diff --git a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
index 56cf7e6..f13df5c 100644
--- 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();