From 64b3052348c3b54e5fab8aaa1a745ab2772f56b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Thu, 28 Dec 2023 16:22:53 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81:=20=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss      |  59 +++--
 src/router/index.js               |   6 +-
 src/store/modelSceneStore.js      |  15 +-
 src/views/device-manage/index.vue |  24 +-
 src/views/edit/edit.vue           | 367 +++++++++++++++++-------------
 src/views/site/index.vue          |  57 ++++-
 src/views/tunnel-manage/index.vue | 140 +++++++++---
 src/views/tunnel/index.vue        |  90 ++++----
 8 files changed, 479 insertions(+), 279 deletions(-)

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index aaeb918..a1f808e 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -86,6 +86,23 @@ body,
     }
   }
 
+  .top-length {
+    z-index: 2;
+    position: absolute;
+    top: 190px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 50px;
+    //font-weight: bold;
+    color: #0BE9FA;
+
+    > span:last-child {
+      margin-left: 40px;
+    }
+
+  }
+
   .top-right {
     z-index: 2;
     position: absolute;
@@ -487,43 +504,53 @@ body,
   background: #072247 !important;
   border: 1px solid #0F82AF !important;
 }
+
 .el-popper {
   max-width: 200px !important;
   box-sizing: border-box;
 }
+
 .el-popper__arrow::before {
   display: none;
 }
-.el-select-dropdown{
-  width: 200px!important;
+
+.el-select-dropdown {
+  width: 200px !important;
 }
-.el-select-dropdown__item{
-  >span{
+
+.el-select-dropdown__item {
+  > span {
     color: #FFFFFF;
   }
 }
+
 .el-select .el-input .el-select__caret {
-  font-size: 35px!important;
+  font-size: 35px !important;
 }
-.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{
-  background-color: #064B66!important;
-  width:198px!important;
+
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+  background-color: #064B66 !important;
+  width: 198px !important;
 }
-.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
-  background-color: #064B66!important;
-  width:200px!important;
+
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+  background-color: #064B66 !important;
+  width: 200px !important;
 }
-.el-select-tags-wrapper{
-  .el-tag{
-    padding: 28px 20px!important;
+
+.el-select-tags-wrapper {
+  .el-tag {
+    padding: 28px 20px !important;
     font-size: 35px;
-    .el-icon{
+
+    .el-icon {
       width: 40px;
       height: 40px;
-      font-size: 40px!important;
+      font-size: 40px !important;
     }
   }
 }
+
 .current-site {
   .el-select-dropdown {
     width: 200px !important;
diff --git a/src/router/index.js b/src/router/index.js
index 77e02de..a66b61a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,7 +24,7 @@ const routes = [
     },
   },
   {
-    path: '/edit/:tunnelId(\\d+)',
+    path: '/edit/:tunnelId(\\d+)/:type',
     name: 'tunneledit',
     component: () => import('@/views/edit/edit.vue'),
     meta: {
@@ -60,7 +60,7 @@ const routes = [
     }
   },
   {
-    path: '/tunnel/:siteId(\\d+)',
+    path: '/tunnel/:siteId(\\d+)/:type',
     name: 'tunnel',
     component: () => import('@/views/tunnel-manage/index.vue'),
     meta: {
@@ -69,7 +69,7 @@ const routes = [
     }
   },
   {
-    path: '/device/:tunnelId(\\d+)',
+    path: '/device/:tunnelId(\\d+)/:type',
     name: 'device',
     component: () => import('@/views/device-manage/index.vue'),
     meta: {
diff --git a/src/store/modelSceneStore.js b/src/store/modelSceneStore.js
index 3767c9b..9b101ef 100644
--- a/src/store/modelSceneStore.js
+++ b/src/store/modelSceneStore.js
@@ -44,24 +44,11 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
         });
     });
   }
-  function getTunnelEditAllList(tunnelId = 1) {
-    return new Promise((resolve, reject) => {
-      initSceneData(tunnelId)
-        .then((res) => {
-          allEditList.value = res.data;
-          resolve(JSON.parse(allEditList.value));
-        })
-        .catch((Error) => {
-          reject();
-        });
-    });
-  }
   return {
     equipmentList,
     initData,
     saveSceneData,
     deleteEquipment,
-    getEquipmentList,
-    getTunnelEditAllList,
+    getEquipmentList
   };
 });
diff --git a/src/views/device-manage/index.vue b/src/views/device-manage/index.vue
index 2ff313d..7ff26c7 100644
--- a/src/views/device-manage/index.vue
+++ b/src/views/device-manage/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="tunnel-bgc">
     <div class="box-top">
-      <div class="back-tunnel" @click="router.back(-1)">
+      <div class="back-tunnel" @click="handleGoTunnelMgr">
         <div class="back-icon"></div>
         <span>返回</span>
       </div>
       <div class="tunnel-name">
-        一号隧道
+        {{ tunnelName }}
       </div>
       <div class="tunnel-title"></div>
     </div>
@@ -281,10 +281,10 @@
 <script setup>
 import {getEquipmentList, editFan} from "@/api/tunnelManage";
 import {ElMessage} from "element-plus";
-import {editEquipment} from "../../api/tunnelManage";
-
+import {editEquipment, getTunnelDetail} from "@/api/tunnelManage";
 const router = useRouter()
 const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
+const type = reactive(router.currentRoute.value.params.type)
 const collectionFrequency = ref(0)
 const changeIndex = ref(1)
 const fanData = ref([
@@ -472,6 +472,9 @@ const fenliuData = ref([
 const fanItem=ref({})
 const windItem=ref({})
 const sensorItem=ref({})
+const siteId=ref(0)
+const tunnelName=ref('')
+
 const changeCurrent = (row) => {
   fanItem.value=getFanEditItem(row)
   windItem.value=getWindEditItem(row)
@@ -547,6 +550,19 @@ const getList = () => {
     }
   })
 }
+const getTunnel = () => {
+  getTunnelDetail(tunnelId).then((res) => {
+    if (res?.code === 1000) {
+      siteId.value = res.data.siteId
+      tunnelName.value = res.data.tunnelName
+      console.log('设备详情',res.data)
+    }
+  });
+}
+getTunnel()
+const handleGoTunnelMgr=()=>{
+  router.push('/tunnel/' + siteId.value+'/'+type)
+}
 getList()
 </script>
 
diff --git a/src/views/edit/edit.vue b/src/views/edit/edit.vue
index d38fa03..9305e20 100644
--- a/src/views/edit/edit.vue
+++ b/src/views/edit/edit.vue
@@ -1,202 +1,241 @@
 <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>
-                <div class="del-btn" @click="handleSave">
-                    保存
-                </div>
-            </div>
+  <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="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 class="del-btn" @click="handleSave">
+          保存
         </div>
-
-        <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
-        <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" ref="tunnelScene" :tunnelLength="tunnelLength" />
+      </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" 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 {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
+import {computed} from "vue";
+import {useModelSceneStore} from "@/store/modelSceneStore";
 import {ElMessage} from "element-plus";
 
 const router = useRouter();
 const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
+const type = reactive(router.currentRoute.value.params.type)
 const store = useModelSceneStore();
 const form = ref({
-    tunnelName: '',
-    serialNumber: '',
-    totalLength: '',
-    remarks: ''
+  tunnelName: '',
+  serialNumber: '',
+  totalLength: '',
+  isDefault: false,
+  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
+    }
+  });
 }
 getTunnel()
 const tunnelLength = computed(() => form.value.totalLength);
 const handleGotoDevice = () => {
-    router.push('/device/' + tunnelId)
+  router.push('/device/' + tunnelId)
 }
-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,
-        tunnelThreeConfig: JSON.stringify(await store.getEquipmentList())
+const handleGoTunnelMgr=()=>{
+  router.push('/tunnel/' + form.value.siteId+'/'+type)
+}
+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,
+    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)
     }
-    console.log('data', data, form.value.tunnelLength)
-    editTunnel(data).then((res) => {
-        if (res?.code === 1000) {
-            console.log('re---s', res)
-          ElMessage.success(res.msg)
-          router.push('/tunnel/'+tunnelId)
-            // form.value=res.data
-        }
-    });
+  });
 }
 </script>
 <style lang="scss" scoped>
 #main {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    background-color: #072348;
+  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;
+        }
 
-    .box-top {
         display: flex;
+        justify-content: center;
         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;
-            }
-        }
-
+        cursor: pointer;
+        width: 180px;
+        height: 80px;
+        border-radius: 11px;
+        border: 2px solid #08B7B8;
+        color: #FFFFFF;
+        font-size: 42px;
+      }
     }
 
-    #tunnel-box {
-        height: 100%;
+  }
+
+  #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;
     }
 
-    .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;
-                }
-            }
-        }
+    :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>
diff --git a/src/views/site/index.vue b/src/views/site/index.vue
index b0e6dde..de5d3b4 100644
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -30,7 +30,7 @@
             <div>隧道数量：{{ item.totalTunnel }}条
             </div>
             <div>
-              <div class="tunnel" v-if="item.info.tunnelName">
+              <div class="tunnel" v-if="item.info.tunnelName" @click="goToAddTunnel(item.siteId)">
                 <div>{{ item.info.tunnelName }}</div>
                 <div class="tunnel-icon"></div>
                 <div>施工长度{{ item.info.constructionLength }}米</div>
@@ -41,7 +41,7 @@
                 <div class="add-icon"></div>
               </div>
             </div>
-            <div class="more" @click="goToMoreTunnel(item.siteId)"  v-if="item.info.tunnelName">
+            <div class="more" @click="goToAddTunnel(item.siteId)"  v-if="item.info.tunnelName">
               更多
               <div class="icon"></div>
             </div>
@@ -65,6 +65,12 @@
         <el-form-item label="站点名称">
           <el-input v-model="form.siteName" 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.address" placeholder="请输入站点地址"/>
         </el-form-item>
@@ -148,7 +154,8 @@ const pageInfo = reactive({
 const form = ref({
   address: '',
   siteName: '',
-  describe: ''
+  describe: '',
+  isDefault: false
 });
 const formRules = ref({
   siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
@@ -192,19 +199,16 @@ const handleClickSite = (type) => {
   }
 }
 const goToAddTunnel = (siteId) => {
-  router.push('/tunnel/' + siteId)
-  // router.push('/tunnel/1')
-}
-const goToMoreTunnel = (siteId) => {
-  router.push('/tunnel/' + siteId)
-  // router.push('/tunnel/1')
+  router.push('/tunnel/' + siteId+'/s')
 }
+
 //重置from表单
 const restFrom = () => {
   form.value = {
     address: '',
     siteName: '',
-    describe: ''
+    describe: '',
+    isDefault: false
   }
 }
 const handleEdit = (item) => {
@@ -294,6 +298,37 @@ const handleCurrentChange = (val) => {
 </script>
 
 <style scoped lang="scss">
+: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;
+}
 .clickColor {
   position: absolute;
   top: 7px;
@@ -509,6 +544,7 @@ const handleCurrentChange = (val) => {
             margin-top: 29px;
 
             .tunnel {
+              cursor: pointer;
               margin-right: 20px;
               width: 280px;
               height: 350px;
@@ -542,6 +578,7 @@ const handleCurrentChange = (val) => {
             }
 
             .tunnel-add {
+              cursor: pointer;
               width: 280px;
               height: 350px;
               background: #1891A3;
diff --git a/src/views/tunnel-manage/index.vue b/src/views/tunnel-manage/index.vue
index c7d833f..53125c5 100644
--- a/src/views/tunnel-manage/index.vue
+++ b/src/views/tunnel-manage/index.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="tunnel-bgc">
     <div class="box-top">
-      <div class="back-tunnel" @click="router.back(-1)">
+      <div class="back-tunnel" @click="handleGoSiteOrIndex">
         <div class="back-icon"></div>
         <span>返回</span>
       </div>
+      <div class="site-name">
+        {{siteName}}
+      </div>
       <div class="tunnel-title"></div>
       <div class="all-del-btn">
         <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
@@ -72,6 +75,12 @@
         <el-form-item label="隧道长度" required>
           <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>
@@ -99,6 +108,7 @@
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getTunnelList,addTunnel, deleteTunnel} from "@/api/tunnelManage";
 import {onMounted} from "vue";
+import { getSiteDetail} from "@/api/site";
 
 const router = useRouter()
 const showAddIcon = ref(true)
@@ -231,11 +241,13 @@ const title = ref('新增隧道')
 const isVisited = ref(false);
 const tunnelIds = ref([])
 const tunnelNameList = ref([])
+const siteName = ref('')
 const form = ref({
   tunnelName: '',
   serialNumber: '',
   totalLength: '',
-  remarks: ''
+  remarks: '',
+  isDefault:false
 });
 const isEdit = ref(false)
 const pageInfo = reactive({
@@ -244,13 +256,18 @@ const pageInfo = reactive({
 });
 const total = ref(10);
 onMounted(()=>{
-  console.log('type',type)
-  if(type==='add'){
-    restFrom()
-    title.value = '新增隧道'
-    isVisited.value = true
-  }
+  getSiteDetail(siteId).then((res) => {
+    siteName.value = res.data.siteName
+  });
 })
+const handleGoSiteOrIndex=()=>{
+  if(type==='s'){
+    router.push('/site')
+  }else if(type==='i'){
+    router.push('/')
+  }
+
+}
 const getList = () => {
   getTunnelList({
     siteId:siteId,
@@ -294,26 +311,31 @@ const handleSubmit = (instance) => {
 }
 const handleGoToEditTunnel = (tunnelId) => {
   isEdit.value = true
-  router.push('/edit/' + tunnelId)
+  if(type==='s'){
+    router.push('/edit/' + tunnelId+'/s')
+  }else if(type==='i'){
+    router.push('/edit/' + tunnelId+'/i')
+  }
 }
 const handleChooseAll = () => {
   tunnelList.value.map(item => {
     item.checked = !item.checked
   })
 }
-const handleEdit = () => {
-  title.value = '编辑隧道'
-  // isVisited.value = true
-}
 const handleEditDevice = (tunnelId) => {
-  router.push('/device/' + tunnelId)
+  if(type==='s'){
+    router.push('/device/' + tunnelId+'/s')
+  }else if(type==='i'){
+    router.push('/device/' + tunnelId+'/i')
+  }
 }
 const restFrom = () => {
   form.value = {
     tunnelName: '',
     serialNumber: '',
     totalLength: '',
-    remarks: ''
+    remarks: '',
+    isDefault:false
   }
 }
 const handleAdd = () => {
@@ -345,29 +367,87 @@ const handleMoreDelete = () => {
   if (tunnelIds.value.length === 0) {
     ElMessage.warning('请先选择隧道进行删除')
   } else {
-    ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-      customClass: 'delBox'
-    }).then(() => {
-      deleteTunnel(tunnelIds.value).then(res => {
-        if (res.code === 1000) {
-          ElMessage.success(res.msg)
-          getList()
-          tunnelIds.value = []
-          tunnelNameList.value = []
-        } else {
-          ElMessage.error(res.msg)
+    let flag=false
+    siteList.value.map(item=>{
+      siteIds.value.map(siteItem=>{
+        if(item.siteId===siteItem){
+          console.log('item.tunnelList',item.tunnelList)
+          if(item.tunnelList.length!==0){
+            ElMessage.error('该站点下存在隧道，不能删除!')
+            flag=false
+          }else {
+            flag=true
+          }
         }
       })
     })
+    if(flag){
+      ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        customClass: 'delBox'
+      }).then(() => {
+        deleteTunnel(tunnelIds.value).then(res => {
+          if (res.code === 1000) {
+            ElMessage.success(res.msg)
+            getList()
+            tunnelIds.value = []
+            tunnelNameList.value = []
+          } else {
+            ElMessage.error(res.msg)
+          }
+        })
+      })
+    }
   }
 }
 
 </script>
 
 <style scoped lang="scss">
+.site-name {
+  position: absolute;
+  left: 250px;
+  z-index: 2;
+  margin-left: 120px;
+  height: 61px;
+  font-size: 46px;
+  font-weight: bold;
+  color: #FFFFFF;
+  line-height: 61px;
+}
+: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-dialog) {
   border: 2px solid #05FEFF;
   background: #0D6578;
@@ -508,7 +588,7 @@ const handleMoreDelete = () => {
     }
 
     .site-box {
-      cursor: pointer;
+      //cursor: pointer;
       margin-top: 50px;
       margin-right: 1.5%;
       padding: 40px 30px;
diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index 3ebe473..ff29bf1 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -1,18 +1,24 @@
 <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>
+      <!--      <manage-length class="tunnel-length"></manage-length>-->
+      <div class="top-length">
+        <span>隧道总长度: {{tunnelLength}}米</span>
+        <span>当前施工长度: {{constructionLength}}米</span>
+      </div>
       <div class="top-right">
         <div class="current-site">
           当前站点：<span>{{ currentSite }}</span>
-          <el-dropdown trigger="click" @command="handleCommand">
+          <el-dropdown trigger="click" @command="handleChangeSite">
             <div class="toggle"></div>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label
-                }}</el-dropdown-item>
+                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
+                    item.label
+                  }}
+                </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -24,26 +30,26 @@
         </div>
       </div>
     </div>
-    <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->\
+    <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件 -->
     <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId"></preview-scene>
     <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">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-          :transducer-data="largeScreenData" />
+                  :transducer-data="largeScreenData"/>
         <!--        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
+        <used-ele v-if="showFan" :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" :tunnelId="tunnelId" />
+                 :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" :tunnelId="tunnelId"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -63,22 +69,21 @@
 </template>
 
 <script setup>
-import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
 import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue"
 import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
-import TransducerList from "@/components/content/transducerList/TransducerList.vue";
 import UsedEle from "@/components/content/usedEle/UsedEle.vue";
 import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import ManageLength from "@/components/manageLength/index.vue";
-import { dateFormat } from "@/utils/date.js";
-import { getToken } from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
-import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
-import { ElMessageBox } from "element-plus";
-import { getUserInfo } from "@/api/login";
+import {dateFormat} from "@/utils/date.js";
+import {getToken} from "@/utils/auth";
+import {useAuthStore} from "@/store/userstore.js";
+import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
+import {ElMessageBox} from "element-plus";
+import {getUserInfo} from "@/api/login";
+import {initSceneData} from "@/api/tunnelScene";
+import {getSiteDetail} from "../../api/site";
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -94,6 +99,8 @@ const currentDate = ref(dateFormat());
 const tunnelBtn = ref();
 const tunnelList = ref([]);
 const tunnelId = ref(0);
+const tunnelLength = ref(0);
+const constructionLength = ref(0);
 const routeList = ref([]);
 let socket = reactive("");
 const serialNumber = ref("SC00DY00GH00ELBT");
@@ -107,7 +114,6 @@ const socketData = reactive({
   windPressure: [],
   sensor: [],
 });
-
 onMounted(() => {
   nextTick(() => {
     showFan.value = true;
@@ -120,37 +126,45 @@ const getUser = () => {
     currentUser.value = res.data.user.userName
   })
 }
+const getDefaultSite=(siteId)=>{
+  // console.log('siteList.value',siteList.value)
+  // getSiteDetail(siteId).then((res) => {
+  //   console.log('res',res)
+  // });
+}
 const getOtherInfo = () => {
   getLargeScreenInfo().then((res) => {
     if (res?.code === 1000) {
       routeList.value = res.data.routeList
-      currentSiteId.value = res.data.siteOption[0].value
-      currentSite.value = res.data.siteOption[0].label
       siteList.value = res.data.siteOption
-      tunnelId.value = res.data.tunnelOption[0].value
-      getTunnel(res.data.siteOption[0].value)
-      getScreenInfo(tunnelId.value);
+      currentSiteId.value = res.data.siteOption[res.data.siteOption.length-1].value
+      currentSite.value = res.data.siteOption[res.data.siteOption.length-1].label
+      getTunnel(res.data.siteOption[res.data.siteOption.length-1].value)
     }
   });
 };
-const getScreenInfo =  (id) => {
-   getLargeScreen(id).then((res) => {
+const getScreenInfo = (id) => {
+  tunnelId.value=id
+  getLargeScreen(id).then((res) => {
     if (res?.code === 1000) {
       largeScreenData.value = res.data;
     }
   });
+  initSceneData(id).then((res) => {
+    tunnelLength.value=res.data.tunnelLength
+    constructionLength.value=res.data.constructionLength
+  })
 };
 //根据站点id获取隧道信息
 const getTunnel = (id) => {
   getTunnelBySiteId(id).then((res) => {
     if (res?.code === 1000) {
       tunnelList.value = res.data
-      // getScreenInfo(res.data[0].value)
+      getScreenInfo(res.data[0].value)
     }
   });
 }
 const changeTunnel = (e) => {
-  tunnelId.value = e
   let newObj = {}
   tunnelList.value.forEach((item, index) => {
     if (index === e) {
@@ -158,21 +172,21 @@ const changeTunnel = (e) => {
     }
   })
   getScreenInfo(newObj.value)
-  nextTick(() => {
-    showFan.value = true;
-  });
+  // nextTick(() => {
+  //   showFan.value = true;
+  // });
 }
 const manageSelect = (index) => {
   console.log("首页点击-", index);
   if (index === 0) {
     router.push("/site");
   } else if (index === 1) {
-    router.push("/tunnel/"+tunnelId.value);
+    router.push("/tunnel/" + currentSiteId.value+'/i');
   } else if (index === 2) {
-    router.push("/user/"+currentSiteId.value);
+    router.push("/user/" + currentSiteId.value);
   }
 };
-const handleCommand = (item) => {
+const handleChangeSite = (item) => {
   currentSite.value = item.label
   currentSiteId.value = item.value
   getTunnel(item.value)