tunnel-cloud-web/src/views/edit/edit.vue

<template>
  <div id="main">
    <div class="box-top">
      <div class="back-tunnel" @click="handleGoTunnelMgr">
        <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="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-radio-group v-model="form.isDefault">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </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" :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, provide } from "vue";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { ElMessage } from "element-plus";
import {initSceneData} from "../../api/tunnelScene";

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 modelStore = useModelSceneStore();
const form = ref({
  tunnelName: "",
  serialNumber: "",
  totalLength: "",
  isDefault: false,
  remarks: "",
});
const getTunnel = () => {
  getTunnelDetail(tunnelId).then((res) => {
    if (res?.code === 1000) {
      form.value = res.data;
      console.log('form.value ',form.value )
    }
  });
};
getTunnel();
const tunnelLength = computed(() => form.value.totalLength);
const handleGotoDevice = () => {
  if (type === 's') {
    router.push('/device/' + tunnelId + '/s/' + userId)
  } else if (type === 'i') {
    router.push('/device/' + tunnelId + '/i/' + userId)
  }
};
const handleGoTunnelMgr = () => {
  router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
};
const handleSave = async () => {
  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,
    isDefault: form.value.isDefault,
    modelEquipmentList: await modelStore.initModelDataPreview(tunnelId),
  };
  editTunnel(data).then((res) => {
    if (res?.code === 1000) {
      ElMessage.success(res.msg);
      router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
    } else {
      ElMessage.error(res.msg);
    }
  });
};
</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 {
    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: 20px 30px;
    box-sizing: border-box;

    :deep(.el-radio-group) {
      margin-top: 10px;
    }

    :deep(.el-radio__label) {
      color: #ffffff;
      font-size: 38px;
    }

    :deep(.el-radio__inner) {
      width: 40px;
      height: 40px;
      border-radius: 25px;
      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__inner) {
      background: #064b66;
      border-color: #05feff !important;
    }

    :deep(.el-radio__inner::after) {
      width: 18px;
      height: 18px;
      background: #05feff;
    }

    :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>