From 2ba9e761abc476e9ea1d0b6329a14a72c9dcb38f Mon Sep 17 00:00:00 2001
From: dengj <209192278@qq.com>
Date: Tue, 26 Dec 2023 17:08:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E9=9A=A7=E9=81=93?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=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/api/tunnelManage.js            |  27 +-
 src/components/manageBtn/index.vue |  10 +-
 src/views/device-manage/index.vue  | 436 +++++++++++++++--------------
 src/views/edit/edit.vue            | 341 +++++++---------------
 src/views/tunnel-manage/index.vue  |  67 +++--
 5 files changed, 399 insertions(+), 482 deletions(-)

diff --git a/src/api/tunnelManage.js b/src/api/tunnelManage.js
index b924c9b..9374a38 100644
--- a/src/api/tunnelManage.js
+++ b/src/api/tunnelManage.js
@@ -7,11 +7,13 @@ export const getTunnelList = (params) => {
     params
   })
 }
-export const editTunnel = (data) => {
+export const getTunnelDetail = (tunnelId) => {
   return request({
-    url: '/tunnel/tunnel',
-    method: 'put',
-    data
+    url: `/tunnel/tunnel/${tunnelId}`,
+    method: 'get',
+    params:{
+      tunnelId:tunnelId
+    }
   })
 }
 export const addTunnel = (data) => {
@@ -27,3 +29,20 @@ export const deleteTunnel = (tunnelIdList) => {
     method: 'delete'
   })
 }
+//设备信息列表
+export const getEquipmentList = (tunnelId) => {
+  return request({
+    url: '/tunnel/equipment/equipments',
+    method: 'get',
+    params:{
+      tunnelId:tunnelId
+    }
+  })
+}
+export const editTunnel = (data) => {
+  return request({
+    url: '/tunnel/model/details',
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file
diff --git a/src/components/manageBtn/index.vue b/src/components/manageBtn/index.vue
index bfddc1c..064e94d 100644
--- a/src/components/manageBtn/index.vue
+++ b/src/components/manageBtn/index.vue
@@ -46,11 +46,11 @@ const btnList = ref([
     icon: 'sp_icon_yhgl.png',
     name: '用户管理'
   },
-  {
-    route: '/system',
-    icon: 'sp_icon_xtgl.png',
-    name: '系统管理'
-  },
+  // {
+  //   route: '/system',
+  //   icon: 'sp_icon_xtgl.png',
+  //   name: '系统管理'
+  // },
   // {
   //   icon: 'sp_icon_mngl.png',
   //   name: '模拟仿真'
diff --git a/src/views/device-manage/index.vue b/src/views/device-manage/index.vue
index 9927eb3..ed9778d 100644
--- a/src/views/device-manage/index.vue
+++ b/src/views/device-manage/index.vue
@@ -26,9 +26,9 @@
             <el-menu-item index="3">
               <span>其他传感器</span>
             </el-menu-item>
-            <el-menu-item index="4">
-              <span>分流器</span>
-            </el-menu-item>
+<!--            <el-menu-item index="4">-->
+<!--              <span>分流器</span>-->
+<!--            </el-menu-item>-->
           </el-menu>
         </div>
         <div class="box-right" v-if="changeIndex==1">
@@ -50,20 +50,20 @@
                       style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
                       :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                       :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
-              <el-table-column prop="name" label="设备名称" align="center"/>
-              <el-table-column prop="currentA" label="A电流" align="center">
+              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
+              <el-table-column prop="phaseCurrentAOffset" label="A电流" align="center">
                 <template #default="scope">
-                  <el-input placeholder="请输入A电流" v-model="scope.row.currentA"></el-input>
+                  <el-input placeholder="请输入A电流" v-model="scope.row.phaseCurrentAOffset"></el-input>
                 </template>
               </el-table-column>
-              <el-table-column prop="currentB" label="B电流" align="center">
+              <el-table-column prop="phaseCurrentBOffset" label="B电流" align="center">
                 <template #default="scope">
-                  <el-input placeholder="请输入B电流" v-model="scope.row.currentB"></el-input>
+                  <el-input placeholder="请输入B电流" v-model="scope.row.phaseCurrentBOffset"></el-input>
                 </template>
               </el-table-column>
-              <el-table-column prop="currentC" label="C电流" align="center">
+              <el-table-column prop="phaseCurrentCOffset" label="C电流" align="center">
                 <template #default="scope">
-                  <el-input placeholder="请输入C电流" v-model="scope.row.currentC"></el-input>
+                  <el-input placeholder="请输入C电流" v-model="scope.row.phaseCurrentCOffset"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -90,7 +90,7 @@
             <div class="cancel-btn">
               取消
             </div>
-            <div class="sure-btn"  @click="router.back(-1)">
+            <div class="sure-btn" @click="router.back(-1)">
               确定
             </div>
           </div>
@@ -114,12 +114,12 @@
                       style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
                       :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                       :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
-              <el-table-column prop="name" label="设备名称" align="center"/>
+              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
               <el-table-column prop="offset" label="偏移量" align="center"/>
               <el-table-column prop="unit" label="单位" align="center"/>
-              <el-table-column prop="thresholdValue" label="阈值" align="center">
+              <el-table-column prop="alarmValue" label="阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
+                  <el-input placeholder="请输入阈值" v-model="scope.row.alarmValue"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -146,7 +146,7 @@
             <div class="cancel-btn">
               取消
             </div>
-            <div class="sure-btn"  @click="router.back(-1)">
+            <div class="sure-btn" @click="router.back(-1)">
               确定
             </div>
           </div>
@@ -170,16 +170,16 @@
                       style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
                       :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                       :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
-              <el-table-column prop="name" label="设备名称" align="center"/>
+              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
               <el-table-column prop="offset" label="偏移量" align="center"/>
               <el-table-column prop="unit" label="单位" align="center">
                 <template #default="scope">
                   <el-input placeholder="请输入单位" v-model="scope.row.unit"></el-input>
                 </template>
               </el-table-column>
-              <el-table-column prop="thresholdValue" label="阈值" align="center">
+              <el-table-column prop="alarmValue" label="阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
+                  <el-input placeholder="请输入阈值" v-model="scope.row.alarmValue"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -272,195 +272,214 @@
 </template>
 
 <script setup>
+import {getEquipmentList} from "@/api/tunnelManage";
+
 const router = useRouter()
+const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
 const collectionFrequency = ref(0)
 const changeIndex = ref(1)
-const fanData = [
-  {
-    name: '一号风机',
-    currentA: '2342',
-    currentB: '2342',
-    currentC: '2342',
-    state: false,
-  },
-  {
-    name: '二号风机',
-    currentA: '2342',
-    currentB: '2342',
-    currentC: '2342',
-    state: true,
-  },
-  {
-    name: '三号风机',
-    currentA: '2342',
-    currentB: '2342',
-    currentC: '2342',
-    state: false,
-  }
-]
-const winData = [
-  {
-    name: '1号风压',
-    offset: '2342',
-    unit: 'Pa',
-    thresholdValue: '2342',
-    state: false,
-  },
-  {
-    name: '2号风压',
-    offset: '2342',
-    unit: 'Pa',
-    thresholdValue: '2342',
-    state: false,
-  },
-  {
-    name: '3号风压',
-    offset: '2342',
-    unit: 'Pa',
-    thresholdValue: '2342',
-    state: false,
-  },
-  {
-    name: '4号风压',
-    offset: '2342',
-    unit: 'Pa',
-    thresholdValue: '2342',
-    state: false,
-  },
-  {
-    name: '5号风压',
-    offset: '2342',
-    unit: 'Pa',
-    thresholdValue: '2342',
-    state: false,
-  },
-  {
-    name: '6号风压',
-    offset: '2342',
-    unit: 'Pa',
-    thresholdValue: '2342',
-    state: false,
-  },
-  {
-    name: '7号风压',
-    offset: '2342',
-    unit: 'Pa',
-    thresholdValue: '2342',
-    state: false,
-  },
-  {
-    name: '8号风压',
-    offset: '2342',
-    unit: 'Pa',
-    thresholdValue: '2342',
-    state: false,
-  },
-  {
-    name: '9号风压',
-    offset: '2342',
-    unit: 'Pa',
-    thresholdValue: '2342',
-    state: false,
-  },
-  {
-    name: '10号风压',
-    offset: '2342',
-    unit: 'Pa',
-    thresholdValue: '2342',
-    state: false,
-  },
-]
-const otherData = [
-  {
-    name: '风速',
-    offset: '2342',
-    unit: 'm/s',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '氧      气',
-    offset: '2342',
-    unit: 'm/s',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '温      度',
-    offset: '2342',
-    unit: 'm/s',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '湿      度',
-    offset: '2342',
-    unit: 'm/s',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '粉 尘',
-    offset: '2342',
-    unit: 'm/s',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '二氧化碳',
-    offset: '2342',
-    unit: 'm/s',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '一氧化碳',
-    offset: '2342',
-    unit: 'm/s',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '二氧化氮',
-    offset: '2342',
-    unit: 'm/s',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '一氧化氮',
-    offset: '2342',
-    unit: 'm/s',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '二氧化硫',
-    offset: '2342',
-    unit: 'm/s',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '硫 化 氢',
-    offset: '2342',
-    unit: 'm/s',
-    thresholdValue: '2342',
-    state: false,
-  }
-]
-const fenliuData = [
-   {
-    name: '1号分流器',
-    offset: '2342',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '2号分流器',
-    offset: '2342',
-    thresholdValue: '2342',
-    state: false,
-  }, {
-    name: '3号分流器',
-    offset: '2342',
-    thresholdValue: '2342',
-    state: false,
-  }
-]
+const fanData = ref([
+  // {
+  //   name: '一号风机',
+  //   currentA: '2342',
+  //   currentB: '2342',
+  //   currentC: '2342',
+  //   state: false,
+  // },
+  // {
+  //   name: '二号风机',
+  //   currentA: '2342',
+  //   currentB: '2342',
+  //   currentC: '2342',
+  //   state: true,
+  // },
+  // {
+  //   name: '三号风机',
+  //   currentA: '2342',
+  //   currentB: '2342',
+  //   currentC: '2342',
+  //   state: false,
+  // }
+])
+const winData = ref([
+  // {
+  //   name: '1号风压',
+  //   offset: '2342',
+  //   unit: 'Pa',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // },
+  // {
+  //   name: '2号风压',
+  //   offset: '2342',
+  //   unit: 'Pa',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // },
+  // {
+  //   name: '3号风压',
+  //   offset: '2342',
+  //   unit: 'Pa',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // },
+  // {
+  //   name: '4号风压',
+  //   offset: '2342',
+  //   unit: 'Pa',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // },
+  // {
+  //   name: '5号风压',
+  //   offset: '2342',
+  //   unit: 'Pa',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // },
+  // {
+  //   name: '6号风压',
+  //   offset: '2342',
+  //   unit: 'Pa',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // },
+  // {
+  //   name: '7号风压',
+  //   offset: '2342',
+  //   unit: 'Pa',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // },
+  // {
+  //   name: '8号风压',
+  //   offset: '2342',
+  //   unit: 'Pa',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // },
+  // {
+  //   name: '9号风压',
+  //   offset: '2342',
+  //   unit: 'Pa',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // },
+  // {
+  //   name: '10号风压',
+  //   offset: '2342',
+  //   unit: 'Pa',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // },
+])
+const otherData = ref([
+  // {
+  //   name: '风速',
+  //   offset: '2342',
+  //   unit: 'm/s',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '氧      气',
+  //   offset: '2342',
+  //   unit: 'm/s',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '温      度',
+  //   offset: '2342',
+  //   unit: 'm/s',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '湿      度',
+  //   offset: '2342',
+  //   unit: 'm/s',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '粉 尘',
+  //   offset: '2342',
+  //   unit: 'm/s',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '二氧化碳',
+  //   offset: '2342',
+  //   unit: 'm/s',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '一氧化碳',
+  //   offset: '2342',
+  //   unit: 'm/s',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '二氧化氮',
+  //   offset: '2342',
+  //   unit: 'm/s',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '一氧化氮',
+  //   offset: '2342',
+  //   unit: 'm/s',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '二氧化硫',
+  //   offset: '2342',
+  //   unit: 'm/s',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '硫 化 氢',
+  //   offset: '2342',
+  //   unit: 'm/s',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }
+])
+const fenliuData = ref([
+  // {
+  //   name: '1号分流器',
+  //   offset: '2342',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '2号分流器',
+  //   offset: '2342',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }, {
+  //   name: '3号分流器',
+  //   offset: '2342',
+  //   thresholdValue: '2342',
+  //   state: false,
+  // }
+])
 const handleChangeMenu = (e) => {
   console.log('切换', e)
   changeIndex.value = e
 }
+const getList = () => {
+  getEquipmentList(tunnelId).then(res => {
+    console.log('设备列表', res)
+    if (res.code === 1000) {
+      fanData.value = res.data.frequencyChangerList
+      winData.value = res.data.windPressureSensorList
+      otherData.value = res.data.sensorList
+      res.data.acquisitionList.map(item=>{
+        if(item.tunnelId==tunnelId){
+          collectionFrequency.value=item.acquisitionPeriod
+        }
+      })
+    }
+  })
+}
+getList()
 </script>
 
 <style scoped lang="scss">
@@ -552,9 +571,10 @@ const handleChangeMenu = (e) => {
             &:nth-child(2) {
               letter-spacing: 120px;
             }
-            &:last-child{
-              letter-spacing: 40px;
-            }
+
+            //&:nth-child(4) {
+            //  letter-spacing: 40px;
+            //}
           }
         }
       }
@@ -589,7 +609,7 @@ const handleChangeMenu = (e) => {
               position: relative;
 
               input {
-                width: 166px;
+                width: 220px;
                 height: 50px;
                 border: 1px solid #05FEFF;
                 background: transparent;
@@ -669,11 +689,13 @@ const handleChangeMenu = (e) => {
         }
 
         :deep(.el-table__row--striped) {
-          background-color: #13849C!important;
+          background-color: #13849C !important;
         }
-        :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){
-          background-color: #13849C!important;
+
+        :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
+          background-color: #13849C !important;
         }
+
         :deep(.el-table__cell) {
           .el-input {
             width: 180px;
diff --git a/src/views/edit/edit.vue b/src/views/edit/edit.vue
index 5541ec8..2d42d6a 100644
--- a/src/views/edit/edit.vue
+++ b/src/views/edit/edit.vue
@@ -1,264 +1,115 @@
 <template>
-    <div id="main">
-        <div class="box-top">
-            <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
-            <div class="tunnel-title"></div>
-            <manage-length class="tunnel-length"></manage-length>
-            <div class="top-right">
-                <div class="current-site">
-                    当前站点：<span>{{ currentSite }}</span>
-                    <el-dropdown trigger="click" @command="handleCommand">
-                        <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-menu>
-                        </template>
-                    </el-dropdown>
-                </div>
-                <div class="current-user">
-                    上午好：<span>{{ currentUser }}</span>
-                    <span>今天是：{{ currentDate }}</span>
-                    <div class="logout" @click="handleLogout"></div>
-                </div>
-            </div>
+  <div id="main">
+    <div class="box-top">
+      <div class="tunnel-title"></div>
+      <div class="top-right">
+        <div class="del-btn" @click="handleSave">
+          保存
         </div>
-        <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
-        <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" />
+      </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"/>
+  </div>
 </template>
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.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";
-
-const authStore = useAuthStore();
+import {getTunnelDetail} from "../../api/tunnelManage";
 const router = useRouter();
-const selectIndex = ref(-1);
-const showFan = ref(false);
-const drawerLeft = ref(true);
-const drawerRight = ref(true);
-const currentSite = ref("");
-const siteList = ref([])
-const currentUser = ref("");
-const currentDate = ref(dateFormat());
-const tunnelBtn = ref();
-const tunnelList = ref([]);
-const tunnelId = ref(0);
-const routeList = ref([]);
-let socket = reactive("");
-const serialNumber = ref("SC00DY00GH00ELBT");
-let token = getToken();
-let send = {
-    type: "ping",
-};
-const largeScreenData = ref(null);
-const socketData = reactive({
-    leftData: [],
-    windPressure: [],
-    sensor: [],
+const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
+
+const form = ref({
+  tunnelName: '',
+  serialNumber: '',
+  totalLength: '',
+  remarks: ''
 });
 
-onMounted(() => {
-    nextTick(() => {
-        showFan.value = true;
-    });
-    getUser()
-    getOtherInfo()
-
-});
-
-const getUser = () => {
-    getUserInfo().then(res => {
-        currentUser.value = res.data.user.userName
-    })
-}
-const getOtherInfo = () => {
-    getLargeScreenInfo().then((res) => {
-        if (res?.code === 1000) {
-            routeList.value = res.data.routeList
-            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);
-        }
-    });
-};
-const getScreenInfo = async (id) => {
-    await getLargeScreen(id).then((res) => {
-        if (res?.code === 1000) {
-            largeScreenData.value = res.data;
-        }
-    });
-};
-//根据站点id获取隧道信息
-const getTunnel = (id) => {
-    getTunnelBySiteId(id).then((res) => {
-        if (res?.code === 1000) {
-            tunnelList.value = res.data
-            getScreenInfo(res.data[0].value)
-        }
-    });
-}
-const changeTunnel = (e) => {
-    tunnelId.value = e
-    let newObj = {}
-    tunnelList.value.forEach((item, index) => {
-        if (index === e) {
-            newObj = item
-        }
-    })
-    getScreenInfo(newObj.value)
-    nextTick(() => {
-        showFan.value = true;
-    });
-}
-const manageSelect = (index) => {
-    console.log("首页点击-", index);
-    if (index === 0) {
-        router.push("/site");
-    } else if (index === 1) {
-        router.push("/tunnel/1");
-    } else if (index === 2) {
-        router.push("/user");
+const getTunnel = () => {
+  getTunnelDetail(tunnelId).then((res) => {
+    if (res?.code === 1000) {
+      console.log('res',res)
+      form.value=res.data
     }
-};
-const handleCommand = (item) => {
-    console.log('commads', item)
-    currentSite.value = item.label
-    getTunnel(item.value)
+  });
 }
-const closeLeft = () => {
-    drawerLeft.value = !drawerLeft.value;
-};
-const closeRight = () => {
-    drawerRight.value = !drawerRight.value;
-};
-const handleLogout = () => {
-    ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-    }).then(() => {
-        authStore.userLogout();
-        router.push("/login");
-    })
-};
-const previousBtn = () => {
-    tunnelBtn.value.prev();
-};
-const nextBtn = () => {
-    tunnelBtn.value.next();
-};
-
-const initWebSocket = () => {
-    // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
-    let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
-    console.log(wsUrl);
-    socket = new WebSocket(wsUrl);
-    //连接发生错误的回调方法
-    socket.onerror = function () {
-        console.log("ws连接发生错误");
-    };
-    //连接成功建立的回调方法
-    socket.onopen = function () {
-        console.log("ws连接成功");
-    };
-    //接收到消息的回调方法
-    socket.onmessage = function (event) {
-        console.log("服务器返回的信息: ", JSON.parse(event.data));
-        const type = JSON.parse(event.data).type;
-        const data = JSON.parse(event.data).data;
-        if (type === "equipment") {
-            data.forEach((item) => {
-                if (item.typeKey === "frequency") {
-                    socketData.leftData = data;
-                } else if (item.typeKey === "windPressure") {
-                    socketData.windPressure = data;
-                } else if (item.typeKey === "sensor") {
-                    socketData.sensor = data;
-                }
-            });
-        }
-    };
-    //连接关闭的回调方法
-    socket.onclose = function () {
-        console.log("ws连接关闭");
-        // initWebSocket()
-    };
-    setInterval(() => {
-        socket.send(JSON.stringify(send));
-    }, 30000);
-};
-const closeSocket = () => {
-    socket.close();
-};
-initWebSocket();
+getTunnel()
 </script>
-<style lang="scss">
-.el-dropdown__popper.el-popper {
-    background: transparent;
-    //border: none;
-    border: 1px solid #0E7DAA;
-    border-radius: 10px;
-}
-
-.is-light {
-    background: rgba(7, 35, 72, 0.9);
-}
-
-.el-popper {
-    padding: 20px;
-    margin-left: 50px;
-    width: 150px;
-    background: rgba(7, 35, 72, 0.9);
-
-    .el-scrollbar__wrap {
-        .el-dropdown__list {
-            .el-dropdown-menu {
-                background-color: rgba(7, 35, 72, 0.9);
-                border-radius: 10px;
-                padding: 5px;
-
-                .el-dropdown-menu__item {
-                    color: #FFFFFF;
-                    //border:none;
-                    padding: 5px;
-
-                    border-bottom: 1px solid #05FEFF;
-
-                    &:last-child {
-                        border-bottom: none;
-                    }
-                }
-
-                .el-dropdown-menu__item.hover,
-                .el-dropdown-menu__item:hover {
-                    background-color: transparent !important;
-                    color: #F7B500;
-                }
-            }
-        }
-    }
-}
-</style>
 <style lang="scss" scoped>
 #main {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: #072348;
+  .del-btn {
+    position: absolute;
+    top: 85px;
+    right: 80px;
+    cursor: pointer;
+    font-size: 42px;
+    width: 180px;
+    height: 80px;
+    line-height: 80px;
+    background: #08B7B8;
+    border-radius: 11px;
+    padding-left: 50px;
+  }
+  #tunnel-box {
     height: 100%;
-    width: 100%;
-    background-color: #072348;
-
-    #tunnel-box {
-        height: 100%;
+  }
+  .edit-box{
+    z-index: 2;
+    position: absolute;
+    top: 160px;
+    left: 70px;
+    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>
   
\ No newline at end of file
diff --git a/src/views/tunnel-manage/index.vue b/src/views/tunnel-manage/index.vue
index b11e12b..948e2b1 100644
--- a/src/views/tunnel-manage/index.vue
+++ b/src/views/tunnel-manage/index.vue
@@ -22,7 +22,7 @@
       <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
         <div class="top">
           <span>{{ item.tunnelName }}</span>
-          <span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}公里</span>
+          <span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}米</span>
           <el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
         </div>
         <div class="box-center">
@@ -33,7 +33,7 @@
                 <div class="edit-icon"></div>
                 <div>隧道编辑</div>
               </div>
-              <div class="edit-btn" @click.stop="handleEditDevice">
+              <div class="edit-btn" @click.stop="handleEditDevice(item.tunnelId)">
                 <div class="edit-icon-two"></div>
                 <div>设备管理</div>
               </div>
@@ -62,15 +62,15 @@
       <div class="siteId">
         <span>{{ title }}</span>
       </div>
-      <el-form :model="form" :label-position="right" label-width="168px">
-        <el-form-item label="隧道名称">
-          <el-input v-model="form.name" placeholder="请输入隧道名称"/>
+      <el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance">
+        <el-form-item label="隧道名称" required>
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
         </el-form-item>
-        <el-form-item label="序列号">
+        <el-form-item label="序列号" required>
           <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
         </el-form-item>
-        <el-form-item label="隧道长度">
-          <el-input type="number" v-model="form.tunnelLength" placeholder="请输入隧道长度"/>
+        <el-form-item label="隧道长度" required>
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
         </el-form-item>
         <el-form-item label="隧道备注">
           <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
@@ -80,7 +80,7 @@
         <div class="cancel-btn" @click="isVisited=false">
           取消
         </div>
-        <div class="sure-btn" @click="handleAddTunnel">
+        <div class="sure-btn" @click="handleSubmit(formInstance)">
           确定
         </div>
       </div>
@@ -97,12 +97,16 @@
 
 <script setup>
 import {ElMessage, ElMessageBox} from "element-plus";
-import {getTunnelList} from "@/api/tunnelManage";
-import {deleteTunnel} from "../../api/tunnelManage";
+import {getTunnelList,addTunnel, deleteTunnel} from "@/api/tunnelManage";
 
 const router = useRouter()
 const showAddIcon = ref(true)
 const siteId = reactive(router.currentRoute.value.params.siteId)
+const formRules = ref({
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: 'blur'}],
+  serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}]
+})
+const formInstance = ref()
 const tunnelList = ref([
   {
     tunnelName: '一号隧道',
@@ -226,9 +230,9 @@ const isVisited = ref(false);
 const tunnelIds = ref([])
 const tunnelNameList = ref([])
 const form = ref({
-  name: '',
+  tunnelName: '',
   serialNumber: '',
-  tunnelLength: '',
+  totalLength: '',
   remarks: ''
 });
 const isEdit = ref(false)
@@ -242,7 +246,7 @@ const getList = () => {
     ...pageInfo
   }).then(res => {
     if (res.code === 1000) {
-      total.value=res.data.total
+      total.value = res.data.total
       tunnelList.value = res.data.rows
     }
   })
@@ -253,8 +257,28 @@ const handleCurrentChange = (val) => {
   pageInfo.pageNum = val
   getList()
 }
-const handleAddTunnel=()=>{
-
+const handleSubmit = (instance) => {
+  // if (!instance) return
+  // console.log('instance',instance)
+  // instance.validate(async (valid) => {
+  //   console.log('valid',valid)
+  //   if (!valid) return
+    const data={
+      siteId:siteId,
+      ...form.value
+    }
+    if(form.value.tunnelName&&form.value.serialNumber&&form.value.totalLength){
+      addTunnel(data).then(res => {
+        if (res.code === 1000) {
+          ElMessage.success('新增成功')
+          getList()
+          isVisited.value = false
+        }
+      })
+    }else {
+      ElMessage.warning('请先完善信息再新增')
+    }
+  // })
 }
 const handleGoToEditTunnel = (tunnelId) => {
   isEdit.value = true
@@ -269,14 +293,15 @@ const handleEdit = () => {
   title.value = '编辑隧道'
   // isVisited.value = true
 }
-const handleEditDevice = () => {
-  router.push('/device/' + 1)
+const handleEditDevice = (tunnelId) => {
+  router.push('/device/' + tunnelId)
 }
 const restFrom = () => {
   form.value = {
-    address: '',
-    siteName: '',
-    describe: ''
+    tunnelName: '',
+    serialNumber: '',
+    totalLength: '',
+    remarks: ''
   }
 }
 const handleAdd = () => {