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

@@ -1,197 +1,199 @@
 <template>
-  <div id="main">
-    <div class="box-top">
-      <div class="back-tunnel" @click="router.back(-1)">
-        <div class="back-icon"></div>
-        <span>返回</span>
-      </div>
-      <div class="tunnel-title"></div>
-      <div class="btn-right">
-        <div class="del-btn" @click="handleGotoDevice">
-          设备管理
+    <div id="main">
+        <div class="box-top">
+            <div class="back-tunnel" @click="router.back(-1)">
+                <div class="back-icon"></div>
+                <span>返回</span>
+            </div>
+            <div class="tunnel-title"></div>
+            <div class="btn-right">
+                <div class="del-btn" @click="handleGotoDevice">
+                    设备管理
+                </div>
+                <div class="del-btn" @click="handleSave">
+                    保存
+                </div>
+            </div>
         </div>
-        <div class="del-btn" @click="handleSave">
-          保存
+        <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-form-item>
+                <el-form-item label="序列号">
+                    <el-input v-model="form.serialNumber" placeholder="请输入序列号" />
+                </el-form-item>
+                <el-form-item label="隧道长度">
+                    <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度" />
+                </el-form-item>
+                <el-form-item label="隧道备注">
+                    <el-input v-model="form.remarks" placeholder="请输入隧道备注" />
+                </el-form-item>
+            </el-form>
         </div>
-      </div>
-    </div>
-    <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-form-item>
-        <el-form-item label="序列号">
-          <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
-        </el-form-item>
-        <el-form-item label="隧道长度">
-          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
-        </el-form-item>
-        <el-form-item label="隧道备注">
-          <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
-        </el-form-item>
-      </el-form>
-    </div>
 
-    <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
-    <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" ref="tunnelScene"/>
-  </div>
+        <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
+        <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 {useModelSceneStore} from "@/store/modelSceneStore";
+import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
+import { computed } from "vue";
+import { useModelSceneStore } from "@/store/modelSceneStore";
 
 const router = useRouter();
 const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
 const store = useModelSceneStore();
 const form = ref({
-  tunnelName: '',
-  serialNumber: '',
-  totalLength: '',
-  remarks: ''
+    tunnelName: '',
+    serialNumber: '',
+    totalLength: '',
+    remarks: ''
 });
 const equipmentList = ref([])
 onMounted(async () => {
-  equipmentList.value = await store.getEquipmentList();
+    equipmentList.value = await store.getEquipmentList();
 })
 const getTunnel = () => {
-  getTunnelDetail(tunnelId).then((res) => {
-    if (res?.code === 1000) {
-      form.value = res.data
-      console.log('for', form.value)
-    }
-  });
+    getTunnelDetail(tunnelId).then((res) => {
+        if (res?.code === 1000) {
+            form.value = res.data
+            console.log('for', form.value)
+        }
+    });
 }
 getTunnel()
+const tunnelLength = computed(() => form.value.totalLength);
 const handleGotoDevice = () => {
-  router.push('/device/' + tunnelId)
+    router.push('/device/' + tunnelId)
 }
 const handleSave = () => {
-  const data = {
-    tunnelId: tunnelId,
-    tunnelName: form.value.tunnelName,
-    serialNumber: form.value.serialNumber,
-    remarks: form.value.remarks,
-    // constructionLength:form.value.constructionLength,
-    constructionLength: 500,
-    tunnelLength: form.value.totalLength,
-    tunnelThreeConfig: JSON.stringify(equipmentList.value),
-  }
-  console.log('data', data, form.value.tunnelLength)
-  editTunnel(data).then((res) => {
-    if (res?.code === 1000) {
-      console.log('re---s', res)
-      // form.value=res.data
+    const data = {
+        tunnelId: tunnelId,
+        tunnelName: form.value.tunnelName,
+        serialNumber: form.value.serialNumber,
+        remarks: form.value.remarks,
+        // constructionLength:form.value.constructionLength,
+        constructionLength: 500,
+        tunnelLength: form.value.totalLength,
+        tunnelThreeConfig: JSON.stringify(equipmentList.value),
     }
-  });
+    console.log('data', data, form.value.tunnelLength)
+    editTunnel(data).then((res) => {
+        if (res?.code === 1000) {
+            console.log('re---s', res)
+            // form.value=res.data
+        }
+    });
 }
 </script>
 <style lang="scss" scoped>
 #main {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background-color: #072348;
-
-  .box-top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .back-tunnel {
-      z-index: 2;
-      position: absolute;
-      top: 100px;
-      //left: 80px;
-      cursor: pointer;
-      margin: 0 0 0 80px;
-      display: flex;
-      align-items: center;
-      width: 180px;
-      height: 80px;
-      line-height: 70px;
-      border-radius: 11px;
-      border: 2px solid #08B7B8;
-      font-size: 42px;
-      color: #FFFFFF;
-
-      .back-icon {
-        margin-right: 20px;
-        margin-left: 23px;
-        width: 35px;
-        height: 35px;
-        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
-      }
-    }
-
-    .btn-right {
-      display: flex;
-      z-index: 2;
-      position: absolute;
-      top: 100px;
-      right: 80px;
-
-      .del-btn {
-        &:first-child {
-          width: 220px;
-          margin-right: 40px;
-        }
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        width: 180px;
-        height: 80px;
-        border-radius: 11px;
-        border: 2px solid #08B7B8;
-        color: #FFFFFF;
-        font-size: 42px;
-      }
-    }
-
-  }
-
-  #tunnel-box {
+    position: relative;
     height: 100%;
-  }
+    width: 100%;
+    background-color: #072348;
 
-  .edit-box {
-    z-index: 2;
-    position: absolute;
-    top: 250px;
-    left: 80px;
-    width: 830px;
-    height: 500px;
-    background-image: url(@/assets/images/transducer/bg.png);
-    padding: 0 30px;
-    box-sizing: border-box;
+    .box-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
 
-    :deep(.el-form-item) {
-      margin-top: 40px;
-    }
+        .back-tunnel {
+            z-index: 2;
+            position: absolute;
+            top: 100px;
+            //left: 80px;
+            cursor: pointer;
+            margin: 0 0 0 80px;
+            display: flex;
+            align-items: center;
+            width: 180px;
+            height: 80px;
+            line-height: 70px;
+            border-radius: 11px;
+            border: 2px solid #08B7B8;
+            font-size: 42px;
+            color: #FFFFFF;
 
-    :deep(.el-form-item__label) {
-      font-size: 38px;
-      color: #FFFFFF;
-      margin-right: 12px;
-      line-height: 50px;
-    }
-
-    :deep(.el-input) {
-      height: 75px;
-
-      .el-input__wrapper {
-        background-color: transparent;
-        border: 1px solid #08B7B8;
-
-        .el-input__inner {
-          height: auto;
-          color: #fff;
-          font-size: 38px;
+            .back-icon {
+                margin-right: 20px;
+                margin-left: 23px;
+                width: 35px;
+                height: 35px;
+                background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+            }
+        }
+
+        .btn-right {
+            display: flex;
+            z-index: 2;
+            position: absolute;
+            top: 100px;
+            right: 80px;
+
+            .del-btn {
+                &:first-child {
+                    width: 220px;
+                    margin-right: 40px;
+                }
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                width: 180px;
+                height: 80px;
+                border-radius: 11px;
+                border: 2px solid #08B7B8;
+                color: #FFFFFF;
+                font-size: 42px;
+            }
+        }
+
+    }
+
+    #tunnel-box {
+        height: 100%;
+    }
+
+    .edit-box {
+        z-index: 2;
+        position: absolute;
+        top: 250px;
+        left: 80px;
+        width: 830px;
+        height: 500px;
+        background-image: url(@/assets/images/transducer/bg.png);
+        padding: 0 30px;
+        box-sizing: border-box;
+
+        :deep(.el-form-item) {
+            margin-top: 40px;
+        }
+
+        :deep(.el-form-item__label) {
+            font-size: 38px;
+            color: #FFFFFF;
+            margin-right: 12px;
+            line-height: 50px;
+        }
+
+        :deep(.el-input) {
+            height: 75px;
+
+            .el-input__wrapper {
+                background-color: transparent;
+                border: 1px solid #08B7B8;
+
+                .el-input__inner {
+                    height: auto;
+                    color: #fff;
+                    font-size: 38px;
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>