唐润平：接口重写

src/views/edit/edit.vue

@@ -7,24 +7,24 @@
       </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 class="del-btn" @click="handleGotoDevice">设备管理</div>
+        <div class="del-btn" @click="handleSave">保存</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-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-radio-group v-model="form.isDefault">
@@ -33,53 +33,60 @@
           </el-radio-group>
         </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" :tunnelLength="tunnelLength"/>
+    <tunnel-scene
+      id="tunnel-box"
+      :isedit="true"
+      :tunnelId="tunnelId"
+      :form="form"
+      ref="tunnelScene"
+      :tunnelLength="tunnelLength"
+    />
   </div>
 </template>
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
-import {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
-import {computed} from "vue";
-import {useModelSceneStore} from "@/store/modelSceneStore";
-import {ElMessage} from "element-plus";
+import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
+import { computed, provide } from "vue";
+import { useModelSceneStore } from "@/store/modelSceneStore";
+import { ElMessage } from "element-plus";
 
 const router = useRouter();
-const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
-const userId = reactive(router.currentRoute.value.params.userId)
-const type = reactive(router.currentRoute.value.params.type)
+const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
+const userId = reactive(router.currentRoute.value.params.userId);
+const type = reactive(router.currentRoute.value.params.type);
 const store = useModelSceneStore();
 const form = ref({
-  tunnelName: '',
-  serialNumber: '',
-  totalLength: '',
+  tunnelName: "",
+  serialNumber: "",
+  totalLength: "",
   isDefault: false,
-  remarks: ''
+  remarks: "",
 });
-const equipmentList = ref([])
+const equipmentList = ref([]);
 onMounted(async () => {
   equipmentList.value = await store.getEquipmentList();
-})
+});
 const getTunnel = () => {
   getTunnelDetail(tunnelId).then((res) => {
     if (res?.code === 1000) {
-      form.value = res.data
+      form.value = res.data;
     }
   });
-}
-getTunnel()
+};
+getTunnel();
 const tunnelLength = computed(() => form.value.totalLength);
 const handleGotoDevice = () => {
-  router.push('/device/' + tunnelId)
-}
-const handleGoTunnelMgr=()=>{
-  router.push('/tunnel/' + form.value.siteId+'/'+type+'/'+userId)
-}
+  router.push("/device/" + tunnelId);
+};
+const handleGoTunnelMgr = () => {
+  router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
+};
 const handleSave = async () => {
   const data = {
     tunnelId: tunnelId,
@@ -90,15 +97,15 @@ const handleSave = async () => {
     constructionLength: 500,
     tunnelLength: form.value.totalLength,
     isDefault: form.value.isDefault,
-    tunnelThreeConfig: JSON.stringify(await store.getEquipmentList())
-  }
+    tunnelThreeConfig: JSON.stringify(await store.getEquipmentList()),
+  };
   editTunnel(data).then((res) => {
     if (res?.code === 1000) {
-      ElMessage.success(res.msg)
-      router.push('/tunnel/' + form.value.siteId+'/'+type+'/'+userId)
+      ElMessage.success(res.msg);
+      router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
     }
   });
-}
+};
 </script>
 <style lang="scss" scoped>
 #main {
@@ -125,16 +132,16 @@ const handleSave = async () => {
       height: 80px;
       line-height: 70px;
       border-radius: 11px;
-      border: 2px solid #08B7B8;
+      border: 2px solid #08b7b8;
       font-size: 42px;
-      color: #FFFFFF;
+      color: #ffffff;
 
       .back-icon {
         margin-right: 20px;
         margin-left: 23px;
         width: 35px;
         height: 35px;
-        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+        background-image: url("@/assets/images/site/zdgl_icon_fh.png");
       }
     }
 
@@ -158,12 +165,11 @@ const handleSave = async () => {
         width: 180px;
         height: 80px;
         border-radius: 11px;
-        border: 2px solid #08B7B8;
-        color: #FFFFFF;
+        border: 2px solid #08b7b8;
+        color: #ffffff;
         font-size: 42px;
       }
     }
-
   }
 
   #tunnel-box {
@@ -185,7 +191,7 @@ const handleSave = async () => {
     }
 
     :deep(.el-radio__label) {
-      color: #FFFFFF;
+      color: #ffffff;
       font-size: 38px;
     }
 
@@ -193,23 +199,23 @@ const handleSave = async () => {
       width: 40px;
       height: 40px;
       border-radius: 25px;
-      border: 4px solid #05FEFF;
+      border: 4px solid #05feff;
       background-color: transparent;
     }
 
-    :deep(.el-radio__input.is-checked+.el-radio__label) {
-      color: #FFFFFF;
+    :deep(.el-radio__input.is-checked + .el-radio__label) {
+      color: #ffffff;
     }
 
-    :deep(.el-radio__input.is-checked .el-radio__inner ) {
-      background: #064B66;
-      border-color: #05FEFF !important;
+    :deep(.el-radio__input.is-checked .el-radio__inner) {
+      background: #064b66;
+      border-color: #05feff !important;
     }
 
     :deep(.el-radio__inner::after) {
       width: 18px;
       height: 18px;
-      background: #05FEFF;
+      background: #05feff;
     }
 
     :deep(.el-form-item) {
@@ -218,7 +224,7 @@ const handleSave = async () => {
 
     :deep(.el-form-item__label) {
       font-size: 38px;
-      color: #FFFFFF;
+      color: #ffffff;
       margin-right: 12px;
       line-height: 50px;
     }
@@ -228,7 +234,7 @@ const handleSave = async () => {
 
       .el-input__wrapper {
         background-color: transparent;
-        border: 1px solid #08B7B8;
+        border: 1px solid #08b7b8;
 
         .el-input__inner {
           height: auto;