廖杰：完成预览模式下鼠标离开设备，面板自动消失，调整面板字体，设备选中的箭头优化

2024-03-18 19:26:45 +08:00
parent b90d5d5911
commit 9e3d896259
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>
+    <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: {
--- 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">
-      <!-- <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;
--- 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();