Merge pull request 'LJ' (#152) from LJ into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/152
2023-12-17 10:36:22 +00:00
parent fe61dd717e ca51f5d789
commit b81aeedf4c
6 changed files with 132 additions and 113 deletions
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/src/components/content/tunnelScene/TunnelScene.vue
@@ -2,30 +2,16 @@
  <div id="scene">
    <div id="cvs" ref="content"></div>
    <dev-info ref="info" :devInfo="devInfo" />
-    <edit-dialog
-      ref="edit"
-      @addEquipment="handleAddEqu"
-      @removeEquipment="handleRemoveEqu"
-      @cancel="handleCancel"
-      :hasDev="hasDevice"
-      :pointNum="pointNum"
-      pointGap="500"
-    />
-    <el-dialog
-      v-model="centerDialogVisible"
-      width="30%"
-      destroy-on-close
-      center
-      :show-close="false"
-      style="
+    <edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
+      :hasDev="hasDevice" :pointNum="pointNum" pointGap="500" />
+    <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
        margin: 20% auto;
        width: 569px;
        height: 330px;
        background: rgba(7, 35, 72, 0.79);
        border-radius: 20px;
        border: 2px solid #0f82af;
-      "
-    >
+      ">
      <p id="remove-title">是否确定删除该设备</p>
      <div class="btn">
        <button @click="centerDialogVisible = false">取消</button>
@@ -98,6 +84,9 @@ async function handleMounted() {
  } catch (err) {
    console.log(err);
  }
+
+  demo.tunnelModeInit();
+
 }

 // 每个模型加载回调
@@ -108,7 +97,7 @@ function loadModel(path) {
      (obj) => {
        resolve(obj);
      },
-      (xhr) => {},
+      (xhr) => { },
      (err) => {
        reject(err);
      }
@@ -174,6 +163,8 @@ function rClickCallback(demo) {
  demo.addFunction("editDev", editDev);
 }

+
+
 // 添加设备
 function handleAddEqu(formInfo) {
  if (!formInfo.equipmentType) {
@@ -221,6 +212,40 @@ function handleCancel() {
  demo._resetState();
  demo.clearTagsObj();
 }
+//现在首先有二种方案，是写在TunnelScene.vue中还是demo.js中呢？
+//我认为可能看数据在哪获取？到时候看在哪里导入，首先我们放在TunnelScene里面吧
+//因为没获取到接口，我们先写死！！！
+//需要参考接口的数据结构！！！，主要是传入函数的参数应该是什么结构？？？
+const ThreeConfig = {
+  code: 0,
+  data: {
+    tunnelThreeConfig: [{
+      equipmentId: 'fan_01',//传感器id
+      equipmentName: '01',//设备名称
+      pointName: 'point_005_tl',//附着点名称(定位)
+      equipmentType: 'fan',//设备类型(类型可根据后端
+      equipmentValue: 23, //设备存的值
+    }, {
+      equipmentId: 'sensors_01',//传感器id
+      equipmentName: '01',//设备名称
+      pointName: 'point_009_bl',//附着点名称(定位)
+      equipmentType: 'sensors',//设备类型(类型可根据后端
+      equipmentValue: 67, //设备存的值
+    }],
+  },
+  msg: "dda"
+}
+//取值方便操作
+// const tunnelConfigEquipment = ThreeConfig.data.tunnelThreeConfig
+
+// function tunnelModeInit() {
+//   for (const item of tunnelConfigEquipment) {
+//     let pointmodel = demo.scene.getobjectByName(item.pointName)
+//     console.log(pointmodel);
+//   }
+// }
+// tunnelModeInit()
+
 </script>

 <style lang="scss" scoped>
@@ -228,10 +253,12 @@ function handleCancel() {
  position: relative;
  height: 100%;
  width: 100%;
+
  #cvs {
    height: 100%;
  }
 }
+
 #remove-title {
  height: 42px;
  font-size: 32px;
@@ -243,10 +270,12 @@ function handleCancel() {
  text-align: center;
  margin: 65px 0px 70px 0px;
 }
+
 .btn {
  display: flex;
  justify-content: center;
  gap: 80px;
+
  :nth-child(1) {
    width: 190px;
    height: 60px;
@@ -258,6 +287,7 @@ function handleCancel() {
    line-height: 37px;
    background: transparent;
  }
+
  :nth-child(2) {
    width: 190px;
    height: 60px;
--- a/src/components/content/tunnelScene/editEquComp/childComps/InputNum.vue
+++ b/src/components/content/tunnelScene/editEquComp/childComps/InputNum.vue
@@ -1,12 +1,7 @@
 <template>
  <div id="input-num">
    <p>{{ params.name }}</p>
-    <input
-      type="text"
-      :placeholder="params.placeholder"
-      @input="handleChange"
-      :disabled="params.disabled"
-    />
+    <input type="text" :placeholder="params.placeholder" @input="handleChange" :disabled="params.disabled" />
  </div>
 </template>

@@ -34,6 +29,7 @@ function handleUnmounted() {
 <style lang="scss" scoped>
 #input-num {
  margin: 40px 30px 0px 30px;
+
  P {
    width: 130px;
    height: 35px;
@@ -42,6 +38,7 @@ function handleUnmounted() {
    color: #ffffff;
    line-height: 35px;
  }
+
  input {
    width: 284px;
    height: 51px;
@@ -55,6 +52,7 @@ function handleUnmounted() {
    padding: 0px 10px;
    overflow: hidden;
  }
+
  ::placeholder {
    color: #0f82af;
  }
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue
@@ -2,54 +2,25 @@
  <div id="edit-dialog">
    <div class="distance-back">
      <p>当前距离洞口：{{ pointDistance_str }}</p>
-      <img
-        src="/images/htmlEditDialog/back-icon.png"
-        alt=""
-        @click="handleCancel"
-      />
+      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
    </div>
    <div class="equ-info">当前风压:{{ p }}Pa</div>
    <div class="setting">
      <div class="setting-item">
        <p>传感器类型</p>
-        <el-select
-          v-model="equipmentSetting.equipmentType"
-          :fit-input-width="true"
-          filterable
-          clearable
-          placeholder="请选择设备类型"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
+          placeholder="请选择设备类型">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="setting-item">
        <p>设备选择</p>
-        <el-select
-          v-model="equipmentSetting.chooseEquipment"
-          :fit-input-width="true"
-          filterable
-          clearable
-          placeholder="请选择设备类型"
-        >
-          <el-option
-            v-for="item in options2"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
+          placeholder="请选择设备类型">
+          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
-      <input-num
-        name="阈值"
-        placeholder="请输入阈值"
-        @inputValue="handelInput"
-        :disabled="isDisabledInputNum"
-      />
+      <input-num name="阈值" placeholder="请输入阈值" @inputValue="handelInput" :disabled="isDisabledInputNum" />
    </div>
    <div class="btn">
      <button @click="removeEquipment">删除</button>
@@ -80,8 +51,7 @@ let p = ref(57);
 //计算锚点之间距离
 const pointDistance_str = computed(
  () =>
-    `${params.pointGap}米*${params.pointNum}=${
-      params.pointGap * params.pointNum
+    `${params.pointGap}米*${params.pointNum}=${params.pointGap * params.pointNum
    }米`
 );

@@ -183,11 +153,13 @@ const equipment = {
  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;
@@ -196,13 +168,16 @@ const equipment = {
      color: #ffffff;
      line-height: 35px;
    }
+
    img {
      cursor: pointer;
    }
+
    img:active {
      transform: scale(0.9);
    }
  }
+
  .equ-info {
    width: 190px;
    height: 35px;
@@ -212,6 +187,7 @@ const equipment = {
    line-height: 35px;
    margin: 20px 30px 0px 30px;
  }
+
  .setting {
    .setting-item {
      padding: 30px 30px 10px 30px;
@@ -226,23 +202,27 @@ const equipment = {
        margin-bottom: 20px;
      }
    }
+
    :deep(.el-select) {
      width: 284px;
      //height: 51px;
      border: transparent;
    }
+
    :deep(.el-input--suffix) {
      width: 284px;
      height: 51px;
      background: rgba(7, 35, 72, 0.79);
      border: 2px solid #0f82af;
    }
+
    :deep(.el-input__wrapper) {
      background: transparent;
      border: none !important;
      padding: 0px 12px 0px 10px;
      box-shadow: none !important;
    }
+
    :deep(.el-input__wrapper input) {
      background: transparent;
      height: 100%;
@@ -251,19 +231,23 @@ const equipment = {
      color: #08b7b8;
      line-height: 37px;
    }
+
    :deep(.el-icon) {
      color: #05feff;
      font-size: 34px;
    }
  }
+
  .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;
@@ -275,6 +259,7 @@ const equipment = {
      color: #08b7b8;
      line-height: 60px;
    }
+
    & :nth-child(2) {
      width: 190px;
      height: 60px;
@@ -286,6 +271,7 @@ const equipment = {
      color: #ffffff;
      line-height: 60px;
    }
+
    button:active {
      transform: scale(0.9);
    }
--- a/src/components/content/tunnelScene/sceneClass/demo.js
+++ b/src/components/content/tunnelScene/sceneClass/demo.js
@@ -487,4 +487,38 @@ export default class Demo {
      opacityTween(0.1, 0.5, true);
    }
  }
+
+
+  ThreeConfig = {
+    code: 0,
+    data: {
+      tunnelThreeConfig: [{
+        equipmentId: 'fan_01',//传感器id
+        equipmentName: '01',//设备名称
+        pointName: 'point_005_tl',//附着点名称(定位)
+        equipmentType: 'fan',//设备类型(类型可根据后端
+        equipmentValue: 23, //设备存的值
+      }, {
+        equipmentId: 'sensors_01',//传感器id
+        equipmentName: '01',//设备名称
+        pointName: 'point_009_bl',//附着点名称(定位)
+        equipmentType: 'sensors',//设备类型(类型可根据后端
+        equipmentValue: 67, //设备存的值
+      }],
+    },
+    msg: "dda"
+  }
+  tunnelConfigEquipment = this.ThreeConfig.data.tunnelThreeConfig
+  tunnelModeInit() {
+    for (const item of this.tunnelConfigEquipment) {
+      //使用api取拿到附着点
+      let pointmodel = this.scene.getObjectByName(item.pointName)
+      let formInfo = {
+        equipmentType: item.equipmentType, //设备类型
+        chooseEquipment: item.equipmentName, //设备选择(设备名称)
+        threshold: item.equipmentValue, //阈值
+      }
+      this.addEquipment(pointmodel, formInfo);
+    }
+  }
 }
--- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
+++ b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
@@ -4,6 +4,9 @@ import EquipmentTag from "../utils/EquipmentTag";
 * @param {Mesh} targetPoint
 * @param {String} equType  "fan" "sensors"
 */
+//formInfo需要的信息这里包括了
+//equipmentType、
+
 function addEquipment(targetPoint, formInfo) {
  if (targetPoint.hasDevice) {
    alert("已添加设备");
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div id="main">
    <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList"/>
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
      <div class="tunnel-title"></div>
      <manage-length class="tunnel-length"></manage-length>
      <div class="top-right">
@@ -18,54 +18,21 @@
    </div>
    <tunnel-scene id="tunnel-box" />
    <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"
-      >
-        <fan-info
-          v-if="showFan"
-          :list="socketData.leftData"
-          :fan-data="largeScreenData"
-        />
-        <transducer-list
-          :list="socketData.leftData"
-          :transducer-data="largeScreenData"
-        />
+      <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">
+        <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"
-        direction="rtl"
-        modal-class="modal-box"
-        :modal="false"
-        :show-close="false"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-      >
-        <wind-pressure-list
-          v-if="showFan"
-          :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 v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
+        :close-on-click-modal="false" :close-on-press-escape="false">
+        <wind-pressure-list v-if="showFan" :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>
@@ -98,8 +65,8 @@ import { dateFormat } from "@/utils/date.js";
 import { onMounted } from "vue";
 import { getToken } from "@/utils/auth";
 import { useAuthStore } from "@/store/userstore.js";
-import { getLargeScreen,getLargeScreenInfo } from "@/api/largeScreen";
-import {ElMessageBox} from "element-plus";
+import { getLargeScreen, getLargeScreenInfo } from "@/api/largeScreen";
+import { ElMessageBox } from "element-plus";

 const authStore = useAuthStore();
 const router = useRouter();
@@ -137,9 +104,9 @@ onMounted(() => {
 const getOtherInfo = async () => {
  await getLargeScreenInfo().then((res) => {
    if (res?.code === 1000) {
-      routeList.value=res.data.routeList
-      currentSite.value=res.data.siteOption[0].label
-      tunnelList.value=res.data.tunnelOption
+      routeList.value = res.data.routeList
+      currentSite.value = res.data.siteOption[0].label
+      tunnelList.value = res.data.tunnelOption
    }
  });
 };
@@ -154,7 +121,7 @@ const manageSelect = (index) => {
  console.log("首页点击-", index);
  if (index === 0) {
    router.push("/site");
-  }else if (index === 1){
+  } else if (index === 1) {
    router.push("/tunnel/1");
  }
 };
@@ -231,6 +198,7 @@ initWebSocket();
  height: 100%;
  width: 100%;
  background-color: #072348;
+
  #tunnel-box {
    height: 100%;
  }