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

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/192

src/components/content/tunnelScene/TunnelScene.vue

@@ -5,7 +5,7 @@
     <!-- 这里的预览模式需要做成不能修改的模式 -->
     <edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
       :hasDev="hasDevice" :pointNum="pointNum" :tunnelId="tunnelId" :position="targetP?.name" :hasEquipment="hasDevice"
-      pointGap="500" />
+      :pointGap="pointGap" />
     <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
         margin: 20% auto;
         width: 569px;
@@ -47,7 +47,7 @@ import {
 
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import { ElMessage } from "element-plus";
 import { useModelSceneStore } from "@/store/modelSceneStore";
 
@@ -62,13 +62,32 @@ const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 
-const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps(["isedit", "tunnelId", "tunnelLength"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+
 
 let isedit = ref(params.isedit);
 
+let tunnelId = reactive(params.tunnelId);
+console.log(tunnelId);
+console.log(params.tunnelLength);
+
+watch(
+  () => params.tunnelLength,
+  (now) => {
+    params.tunnelLength = now
+    console.log(params.tunnelLength);
+    pointGap = now / 20
+  },
+  { deep: true }
+)
+
+let pointGap = reactive(params.tunnelLength);
+
+
 onMounted(handleMounted);
 // 挂载后回调
 async function handleMounted() {
+
   const doms = [info.value.$el, edit.value.$el];
   demo = new ThreeDScene(three, content.value);
   //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
@@ -108,6 +127,8 @@ async function handleMounted() {
       type: "warning",
     });
   }
+
+
 }
 
 // 每个模型加载回调

src/views/edit/edit.vue

@@ -18,28 +18,29 @@
         <div class="edit-box">
             <el-form :model="form" :label-position="right" label-width="188px">
                 <el-form-item label="隧道名称">
-          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
+                    <el-input v-model="form.tunnelName" placeholder="请输入隧道名称" />
                 </el-form-item>
                 <el-form-item label="序列号">
-          <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
+                    <el-input v-model="form.serialNumber" placeholder="请输入序列号" />
                 </el-form-item>
                 <el-form-item label="隧道长度">
-          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
+                    <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度" />
                 </el-form-item>
                 <el-form-item label="隧道备注">
-          <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
+                    <el-input v-model="form.remarks" placeholder="请输入隧道备注" />
                 </el-form-item>
             </el-form>
         </div>
 
         <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
-    <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" ref="tunnelScene"/>
+        <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" ref="tunnelScene" :tunnelLength="tunnelLength" />
     </div>
 </template>
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
-import {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
+import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
-import {useModelSceneStore} from "@/store/modelSceneStore";
+import { computed } from "vue";
+import { useModelSceneStore } from "@/store/modelSceneStore";
 
 const router = useRouter();
 const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
@@ -63,6 +64,7 @@ const getTunnel = () => {
     });
 }
 getTunnel()
+const tunnelLength = computed(() => form.value.totalLength);
 const handleGotoDevice = () => {
     router.push('/device/' + tunnelId)
 }