From 375d6719d8f8700c9ab89858dbcd6d699b32d2f0 Mon Sep 17 00:00:00 2001
From: dj <1042039504@qq.com>
Date: Sat, 7 Dec 2024 22:35:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=87=E4=BB=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/device-manage/index-new.vue     |  861 ++++++++++++++++
 src/views/device-manage/index-or.vue      |  860 ++++++++++++++++
 src/views/device-manage/index-origanl.vue |  860 ++++++++++++++++
 src/views/edit/edit-new.vue               |  415 ++++++++
 src/views/edit/edit-or.vue                |  342 +++++++
 src/views/edit/edit-orignal.vue           |  342 +++++++
 src/views/tunnel-manage/index-new.vue     | 1093 +++++++++++++++++++++
 src/views/tunnel-manage/index-or.vue      | 1060 ++++++++++++++++++++
 src/views/tunnel-manage/index-origanl.vue | 1060 ++++++++++++++++++++
 9 files changed, 6893 insertions(+)
 create mode 100644 src/views/device-manage/index-new.vue
 create mode 100644 src/views/device-manage/index-or.vue
 create mode 100644 src/views/device-manage/index-origanl.vue
 create mode 100644 src/views/edit/edit-new.vue
 create mode 100644 src/views/edit/edit-or.vue
 create mode 100644 src/views/edit/edit-orignal.vue
 create mode 100644 src/views/tunnel-manage/index-new.vue
 create mode 100644 src/views/tunnel-manage/index-or.vue
 create mode 100644 src/views/tunnel-manage/index-origanl.vue

diff --git a/src/views/device-manage/index-new.vue b/src/views/device-manage/index-new.vue
new file mode 100644
index 0000000..4c8d057
--- /dev/null
+++ b/src/views/device-manage/index-new.vue
@@ -0,0 +1,861 @@
+<template>
+  <div class="tunnel-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="router.back(-1)">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <div class="tunnel-name">
+        {{ tunnelName }}
+      </div>
+      <tunnel-title/>
+    </div>
+    <div class="device-content">
+      <div class="device-box">
+        <div class="box-left">
+          <el-menu
+              default-active="1"
+              @select="handleChangeMenu"
+          >
+            <el-menu-item index="1">
+              <span>风机</span>
+            </el-menu-item>
+            <el-menu-item index="2">
+              <span>风压</span>
+            </el-menu-item>
+            <el-menu-item index="3">
+              <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">
+          <div class="device-title">
+            <span>风机设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="fanFrequency">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe
+                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;" table-layout="auto"
+                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
+              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
+              <el-table-column prop="ratedPower" label="额定功率" align="center">
+                <template #default="scope">
+                  <el-input placeholder="额定功率" v-model="scope.row.ratedPower"
+                             ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
+              <el-table-column prop="acurrentValue" label="A电流阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="A电流" v-model="scope.row.acurrentValue"
+                             ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
+              <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"
+                             ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
+              <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"
+                             ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
+                <template #default="scope">
+<!--                  {{scope.row.serialNumberOption.filter(item => item.value == scope.row.serialNumber).map(item => item.label)[0]}}?-->
+<!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
+<!--                               clearable class="serialNumber">-->
+<!--                    <el-option-->
+<!--                        v-for="item in scope.row.serialNumberOption"-->
+<!--                        :key="item.value"-->
+<!--                        :label="item.label"-->
+<!--                        :value="item.value"-->
+<!--                    />-->
+<!--                  </el-select>-->
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" label="状态" align="center"  width="200">
+                <template #default="scope">
+                  <div class="switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click="scope.row.state = 1; "
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state = 0; "
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="editEquip">
+              确定
+            </div>
+          </div>
+        </div>
+        <div class="box-right" v-if="changeIndex==2">
+          <div class="device-title">
+            <span>风压设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="windFrequency">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe table-layout="auto"
+                      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="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="alarmValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                             ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="miniRange" label="最小范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                             ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="maxRange" label="最大范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                             ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
+                <template #default="scope">
+                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
+                              clearable class="serialNumber" @clear="clearWinDataSelectedOption" >
+<!--                    @change="changeWindDataSerialNumber($event,scope.row.serialNumberOption)"-->
+                    <el-option
+                        v-for="item in scope.row.serialNumberOption"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+
+                    />
+<!--                    :disabled="serialNumberOptionDisabled(item)"-->
+<!--                    :title="serialNumberOptionDisabled(item)?'该4G序列号已选择':''"-->
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" label="状态" align="center" width="200">
+                <template #default="scope">
+                  <div class="switch wind-switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = 1; "
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state =  0; "
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="editEquip">
+              确定
+            </div>
+          </div>
+        </div>
+        <div class="box-right" v-if="changeIndex==3">
+          <div class="device-title">
+            <span>其他传感器设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="otherFrequency">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe table-layout="auto"
+                      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="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="alarmValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                             ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="miniRange" label="最小范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                             ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="maxRange" label="最大范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                             ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
+                <template #default="scope">
+                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
+                               clearable class="serialNumber">
+                    <el-option
+                        v-for="item in otherSensorSerialNumberOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" label="状态" align="center" width="200">
+                <template #default="scope">
+                  <div class="switch wind-switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = 1; "
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state =  0; "
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="editEquip">
+              确定
+            </div>
+          </div>
+        </div>
+        <div class="box-right" v-if="changeIndex==4">
+          <div class="device-title">
+            <span>分流器设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="fenFrequency">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe
+                      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="fenLiuData">
+              <el-table-column prop="name" label="设备名称" align="center"/>
+              <el-table-column prop="offset" label="偏移量" align="center"/>
+              <el-table-column prop="thresholdValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="阈值" v-model="scope.row.thresholdValue"
+                            @change="changeFenData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" label="状态" align="center"  width="200">
+                <template #default="scope">
+                  <div class="switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = 1;changeFenData(scope.row)"
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state = 0;changeFenData(scope.row)"
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="handleEditFen">
+              确定
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ElLoading, ElMessage} from "element-plus";
+import {getEquipmentList, editEquipment, getTunnelDetail,getOtherSensorSerialNumberOptions, getWindPressureSerialNumberOptions} from "@/api/tunnelManage";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {debounce} from 'lodash'
+
+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 fanFrequency = ref(0)
+const windFrequency = ref(0)
+const otherFrequency = ref(0)
+const changeIndex = ref(1)
+const fanData = ref([])
+const winData = ref([])
+const windPressureDataSerialNumberOptions = ref([])
+const otherSensorSerialNumberOptions = ref([])
+const otherData = ref([])
+const winDataSelectedOption = ref([])
+const fenLiuData = ref([])
+const siteId = ref(0)
+const tunnelName = ref('')
+const getWindPressureOptions =async () => {
+  let {data,code,msg}=await getWindPressureSerialNumberOptions(tunnelId)
+  if(code===1000){
+    windPressureDataSerialNumberOptions.value= data
+  }else{
+    ElMessage.error(msg)
+  }
+}
+getWindPressureOptions()
+const getOtherSensorOptions =async () => {
+  let {data,code,msg}=await getOtherSensorSerialNumberOptions(tunnelId)
+  if(code===1000){
+    otherSensorSerialNumberOptions.value= data
+  }else{
+    ElMessage.error(msg)
+  }
+}
+getOtherSensorOptions()
+const clearWinDataSelectedOption=()=>{
+  winDataSelectedOption.value=[]
+}
+const changeWindDataSerialNumber = (value,options) => {
+  options?.forEach(item=>{
+    if(item.value==value){
+      if(item.label.indexOf('4G')>=0){
+        winDataSelectedOption.value.push(value)
+      }else{
+        winDataSelectedOption.value=[]
+      }
+    }
+  })
+}
+const serialNumberOptionDisabled=(item)=>{
+  return winDataSelectedOption.value.indexOf(item.value) >= 0;
+}
+const changeData = (item) => {
+  return {
+    equipmentId: item.equipmentId,
+    unit: item.unit,
+    alarmValue: item.alarmValue,
+    serialNumber:item.serialNumber,
+    miniRange: parseInt(item.miniRange),
+    maxRange: parseInt(item.maxRange),
+    state: item.state,
+  }
+}
+const editEquip = debounce(() => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '修改中...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  let newFrequency = [{
+    acquisitionPeriod: fanFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'frequency'
+  }, {
+    acquisitionPeriod: windFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'windPressure'
+  }, {
+    acquisitionPeriod: otherFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'sensor'
+  }]
+  let newFan = []
+  let newWind = []
+  let newSensor = []
+  fanData.value.forEach(item => {
+    let obj = {
+      equipmentId: item.equipmentId,
+      ratedPower: parseInt(item.ratedPower),
+      acurrentValue: parseInt(item.acurrentValue),
+      bcurrentValue: parseInt(item.bcurrentValue),
+      ccurrentValue: parseInt(item.ccurrentValue),
+      serialNumber:item.serialNumber,
+      state: parseInt(item.state)
+    }
+    newFan.push(obj)
+  })
+  winData.value.forEach(item => {
+    newWind.push(changeData(item))
+  })
+  otherData.value.forEach(item => {
+    newSensor.push(changeData(item))
+  })
+  const basicData = {
+    tunnelId: tunnelId,
+    acquisitionList: newFrequency,
+    frequencyChangerList: newFan,
+    windPressureSensorList: newWind,
+    sensorList: newSensor,
+    // shuntList: editFenLiuData.value,
+  }
+  // console.info("🚀 ~ file:index method: line:478 -----",basicData)
+  editEquipment(basicData).then(res => {
+    if (res.code === 1000) {
+      loading.close()
+      ElMessage.success('修改成功')
+      router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
+    } else {
+      ElMessage.error(res.msg)
+      loading.close()
+
+    }
+  })
+}, 100)
+
+const handleChangeMenu = (e) => {
+  changeIndex.value = e
+}
+
+const getList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+   getEquipmentList(tunnelId).then( res => {
+    if (res.code === 1000) {
+      fanData.value = res.data.frequencyChangerList
+      res.data.windPressureSensorList?.forEach(item => {
+        item.offset = item.offset + 4000
+      })
+      winData.value = res.data.windPressureSensorList
+      winData.value?.forEach(item => {
+        for (const equipmentId in windPressureDataSerialNumberOptions.value) {
+          if(item.equipmentId == equipmentId){
+            item.serialNumberOption =windPressureDataSerialNumberOptions.value[equipmentId]
+          }
+        }
+      })
+      res.data.sensorList?.forEach(item => {
+        item.offset = item.offset + 4000
+      })
+      otherData.value = res.data.sensorList
+      res.data.acquisitionList.map(item => {
+        item.acquisitionPeriod = item.acquisitionPeriod / 1000
+        if (item.typeKey === 'frequency') {
+          fanFrequency.value = item.acquisitionPeriod
+        } else if (item.typeKey === 'windPressure') {
+          windFrequency.value = item.acquisitionPeriod
+        } else if (item.typeKey === 'sensor') {
+          otherFrequency.value = item.acquisitionPeriod
+        }
+      })
+    }
+    loading.close()
+  })
+}
+const getTunnel = () => {
+  getTunnelDetail(tunnelId).then((res) => {
+    if (res?.code === 1000) {
+      siteId.value = res.data.siteId
+      tunnelName.value = res.data.tunnelName
+    }
+  });
+}
+getTunnel()
+getList()
+</script>
+<style lang="scss">
+.serialNumber{
+  .el-input{
+    width: 580px!important;
+  }
+  .el-input__suffix-inner{
+    .el-icon{
+      width: 3em!important;
+      height: 3em!important;
+      color: #fff!important;
+      svg{
+        width: 3em!important;
+        height: 3em!important;
+      }
+    }
+  }
+}
+.el-select.serialNumber {
+  border-radius: 6px!important;
+  border: 1px solid #05FEFF!important;
+  background-color: transparent!important;
+  .el-select__wrapper{
+    height: 54px!important;
+    color: #FFFFFF!important;
+    font-size: 40px!important;
+    //height: auto!important;
+    line-height: normal!important;
+    border-radius: 6px!important;
+    border: 1px solid #05FEFF!important;
+    background-color: transparent!important;
+  }
+  .el-select__placeholder {
+    height: 54px;
+    line-height: 54px;
+    color: #FFFFFF;
+  }
+}
+
+
+.serialNumber-select.el-popper {
+  background: #064B66 !important;
+  border: 2px solid #05FEFF !important;
+
+.el-select-dropdown {
+    min-width: 130px !important;
+  }
+  .el-select-dropdown__item.is-hovering{
+    background-color: #064B66 !important;
+  }
+  .el-select-dropdown__item {
+    color: #FFFFFF;
+    border-bottom: 1px solid #05FEFF;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  .el-select-dropdown__item.selected {
+    background-color: transparent !important;
+    color: #F7B500;
+  }
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: transparent !important;
+    color: #F7B500;
+  }
+  .el-select-dropdown__item.is-disabled{
+    background-color: transparent !important;
+    color: #fff!important;
+  }
+}
+</style>
+<style scoped lang="scss">
+.tunnel-bgc {
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/tunnel/sd_bj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: flex-start;
+
+    .tunnel-name {
+      margin-left: 120px;
+      height: 61px;
+      font-size: 46px;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: 61px;
+    }
+
+    .back-tunnel {
+      cursor: pointer;
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 38px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 23px;
+        width: 33px;
+        height: 33px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+  }
+
+  .device-content {
+    display: flex;
+    justify-content: center;
+    padding-top: 190px;
+
+    .device-box {
+      display: flex;
+      width: 3500px;
+      height: 1600px;
+      background: #064B66;
+      border-radius: 20px;
+      border: 2px solid #05FEFF;
+      box-sizing: border-box;
+
+      .box-left {
+        padding-left: 24px;
+        width: 300px;
+        height: 1596px;
+        background: #0D5A7A;
+        border-radius: 20px 0px 0px 20px;
+
+        :deep(.el-menu) {
+          border-right: none;
+          margin-top: 261px;
+          background-color: #0D5A7A;
+
+          .el-menu-item.is-active {
+            background-image: url(../../assets/images/device/sdgl_xz.png);
+          }
+
+          .el-menu-item {
+            color: #fff;
+            height: 90px;
+            font-size: 40px;
+
+            &:hover {
+              background-color: #0D5A7A;
+            }
+
+            &:first-child {
+              letter-spacing: 120px;
+            }
+
+            &:nth-child(2) {
+              letter-spacing: 120px;
+            }
+
+            //&:nth-child(4) {
+            //  letter-spacing: 40px;
+            //}
+          }
+        }
+      }
+
+      .box-right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        .device-title {
+          margin-top: 60px;
+          line-height: 61px;
+          color: #FFFFFF;
+          display: flex;
+          justify-content: center;
+
+          > span:first-child {
+            font-size: 46px;
+            font-weight: bold;
+          }
+
+          .collection-frequency {
+            height: 60px;
+            display: flex;
+            align-items: center;
+            position: absolute;
+            right: 102px;
+
+            > span:first-child {
+              font-size: 38px !important;
+              white-space: pre;
+              margin-right: 15px;
+            }
+
+            :deep(.el-input__wrapper) {
+              width: 166px;
+              height: 56px;
+              background-color: transparent;
+              box-shadow: none;
+              border-radius: 6px;
+              border: 1px solid #05FEFF;
+              transform: none;
+              transition: none;
+
+              .el-input__inner {
+                height: 54px;
+                font-size: 30px;
+                color: #FFFFFF;
+              }
+
+              .el-input__suffix-inner {
+                font-size: 30px;
+                color: #08B7B8;
+                line-height: 40px;
+              }
+            }
+          }
+        }
+      }
+
+      .btns {
+        width: 100%;
+        margin: 0 auto;
+        position: absolute;
+        bottom: 70px;
+      }
+
+      .device-table {
+        margin-top: 50px;
+        margin-left: 50px;
+        margin-right: 50px;
+
+        .active {
+          color: #FFFFFF;
+          background: #0f7da9;
+        }
+
+        .wind-switch {
+          //margin-left: 26px;
+        }
+
+        .switch {
+          margin-top: 22px;
+
+          display: flex;
+          width: 200px;
+          height: 50px;
+          border-radius: 6px;
+          border: 1px solid #05FEFF;
+          overflow: hidden;
+          color: #51A2B3;
+          line-height: 40px;
+          font-size: 36px;
+
+          & > div {
+            flex: 1;
+            text-align: center;
+            cursor: pointer;
+          }
+        }
+
+        :deep(.el-table--fit) {
+          //width: 1780px !important;
+          width: auto;
+        }
+
+        :deep(.cell) {
+          height: 80px;
+          line-height: 80px;
+          color: #fff;
+          font-size: 38px;
+        }
+
+        :deep(.el-table tr) {
+          background-color: #1C5971;
+        }
+
+        :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
+          background-color: #1C5971;
+        }
+
+        :deep(.el-table__row--striped) {
+          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;
+            height: 53px;
+          }
+
+          .el-input__wrapper {
+            border-radius: 6px;
+            border: 1px solid #05FEFF;
+            background-color: transparent;
+
+            .el-input__inner {
+              color: #FFFFFF;
+              font-size: 40px;
+              height: auto;
+              line-height: normal;
+            }
+          }
+        }
+
+        :deep(.el-table__inner-wrapper::before) {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/device-manage/index-or.vue b/src/views/device-manage/index-or.vue
new file mode 100644
index 0000000..cd181e9
--- /dev/null
+++ b/src/views/device-manage/index-or.vue
@@ -0,0 +1,860 @@
+<template>
+  <div class="tunnel-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="router.back(-1)">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <div class="tunnel-name">
+        {{ tunnelName }}
+      </div>
+      <tunnel-title/>
+    </div>
+    <div class="device-content">
+      <div class="device-box">
+        <div class="box-left">
+          <el-menu
+              default-active="1"
+              @select="handleChangeMenu"
+          >
+            <el-menu-item index="1">
+              <span>风机</span>
+            </el-menu-item>
+            <el-menu-item index="2">
+              <span>风压</span>
+            </el-menu-item>
+            <el-menu-item index="3">
+              <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">
+          <div class="device-title">
+            <span>风机设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="fanFrequency" @change="changeFan">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe
+                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;" table-layout="auto"
+                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
+              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
+              <el-table-column prop="ratedPower" label="额定功率" align="center">
+                <template #default="scope">
+                  <el-input placeholder="额定功率" v-model="scope.row.ratedPower"
+                            @change="changeFanData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
+              <el-table-column prop="acurrentValue" label="A电流阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="A电流" v-model="scope.row.acurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
+              <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
+              <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
+              <!--                <template #default="scope">-->
+              <!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
+              <!--                             @change="changeFanData(scope.row)" class="serialNumber">-->
+              <!--                    <el-option-->
+              <!--                        v-for="item in scope.row.serialNumberOption"-->
+              <!--                        :key="item.value"-->
+              <!--                        :label="item.label"-->
+              <!--                        :value="item.value"-->
+              <!--                    />-->
+              <!--                  </el-select>-->
+              <!--                </template>-->
+              <!--              </el-table-column>-->
+              <el-table-column prop="state" label="状态" align="center"  width="200">
+                <template #default="scope">
+                  <div class="switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click="scope.row.state = 1;changeFanData(scope.row)"
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state = 0;changeFanData(scope.row)"
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="editEquip">
+              确定
+            </div>
+          </div>
+        </div>
+        <div class="box-right" v-if="changeIndex==2">
+          <div class="device-title">
+            <span>风压设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="windFrequency" @change="changeWind">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe table-layout="auto"
+                      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="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" @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="alarmValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                            @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="miniRange" label="最小范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                            @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="maxRange" label="最大范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                            @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
+              <!--                <template #default="scope">-->
+              <!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
+              <!--                             @change="changeWindData(scope.row)" class="serialNumber">-->
+              <!--                    <el-option-->
+              <!--                        v-for="item in scope.row.serialNumberOption"-->
+              <!--                        :key="item.value"-->
+              <!--                        :label="item.label"-->
+              <!--                        :value="item.value"-->
+              <!--                    />-->
+              <!--                  </el-select>-->
+              <!--                </template>-->
+              <!--              </el-table-column>-->
+              <el-table-column prop="state" label="状态" align="center" width="200">
+                <template #default="scope">
+                  <div class="switch wind-switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = 1;changeWindData(scope.row)"
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state =  0;changeWindData(scope.row)"
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="editEquip">
+              确定
+            </div>
+          </div>
+        </div>
+        <div class="box-right" v-if="changeIndex==3">
+          <div class="device-title">
+            <span>其他传感器设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="otherFrequency" @change="changeOther">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe table-layout="auto"
+                      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="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" @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="alarmValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                            @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="miniRange" label="最小范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                            @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="maxRange" label="最大范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                            @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
+              <!--                <template #default="scope">-->
+              <!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
+              <!--                             @change="changeOtherData(scope.row)" clearable class="serialNumber">-->
+              <!--                    <el-option-->
+              <!--                        v-for="item in scope.row.serialNumberOption"-->
+              <!--                        :key="item.value"-->
+              <!--                        :label="item.label"-->
+              <!--                        :value="item.value"-->
+              <!--                    />-->
+              <!--                  </el-select>-->
+              <!--                </template>-->
+              <!--              </el-table-column>-->
+              <el-table-column prop="state" label="状态" align="center" width="200">
+                <template #default="scope">
+                  <div class="switch wind-switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = 1;changeOtherData(scope.row)"
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state =  0;changeOtherData(scope.row)"
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="editEquip">
+              确定
+            </div>
+          </div>
+        </div>
+        <div class="box-right" v-if="changeIndex==4">
+          <div class="device-title">
+            <span>分流器设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="fenFrequency">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe
+                      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="fenLiuData">
+              <el-table-column prop="name" label="设备名称" align="center"/>
+              <el-table-column prop="offset" label="偏移量" align="center"/>
+              <el-table-column prop="thresholdValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="阈值" v-model="scope.row.thresholdValue"
+                            @change="changeFenData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" label="状态" align="center"  width="200">
+                <template #default="scope">
+                  <div class="switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = 1;changeFenData(scope.row)"
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state = 0;changeFenData(scope.row)"
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="handleEditFen">
+              确定
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ElLoading, ElMessage} from "element-plus";
+import {getEquipmentList, editEquipment, getTunnelDetail, getEquipmentSerialNumberOptions} from "@/api/tunnelManage";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {debounce} from 'lodash'
+
+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 fanFrequency = ref(0)
+const windFrequency = ref(0)
+const otherFrequency = ref(0)
+const changeIndex = ref(1)
+const fanData = ref([])
+const editFanData = ref([])
+const winData = ref([])
+const editWinData = ref([])
+const otherData = ref([])
+const editOtherData = ref([])
+const fenLiuData = ref([])
+const editFenLiuData = ref([])
+const frequencyData = ref([])
+const serialNumberOptions = ref([])
+const siteId = ref(0)
+const tunnelName = ref('')
+const getSerialNumberOptions =async (equipmentId) => {
+  console.log('tunnelId',tunnelId)
+  let {data,code,msg}=await getEquipmentSerialNumberOptions(tunnelId,equipmentId)
+  if(code===1000){
+    return data
+  }else{
+    ElMessage.error(msg)
+  }
+  // getEquipmentSerialNumberOptions(tunnelId,equipmentId).then(res => {
+  //   if (res.code === 1000) {
+  //     serialNumberOptions.value = res.data
+  //   } else {
+  //     ElMessage.error(res.msg)
+  //   }
+  // })
+}
+// getSerialNumberOptions()
+const changeFan = (e) => {
+  // const fanObj = {
+  //   acquisitionPeriod: e * 1000,
+  //   tunnelId: tunnelId,
+  //   typeKey: 'frequency'
+  // }
+  // frequencyData.value.push(fanObj)
+}
+const changeFanData = (row) => {
+  // editFanData.value.push(row)
+}
+const changeWind = (e) => {
+  // const windObj = {
+  //   acquisitionPeriod: e * 1000,
+  //   tunnelId: tunnelId,
+  //   typeKey: 'windPressure'
+  // }
+  // frequencyData.value.push(windObj)
+}
+const changeWindData = (row) => {
+  // editWinData.value.push(row)
+}
+const changeOther = (e) => {
+  // const otherObj = {
+  //   acquisitionPeriod: e * 1000,
+  //   tunnelId: tunnelId,
+  //   typeKey: 'sensor'
+  // }
+  // frequencyData.value.push(otherObj)
+}
+const changeOtherData = (row) => {
+  // editOtherData.value.push(row)
+}
+const changeData = (item) => {
+  return {
+    equipmentId: item.equipmentId,
+    unit: item.unit,
+    alarmValue: item.alarmValue,
+    serialNumber:item.serialNumber,
+    miniRange: parseInt(item.miniRange),
+    maxRange: parseInt(item.maxRange),
+    state: item.state,
+  }
+}
+const editEquip = debounce(() => {
+  let newFrequency = [{
+    acquisitionPeriod: fanFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'frequency'
+  }, {
+    acquisitionPeriod: windFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'windPressure'
+  }, {
+    acquisitionPeriod: otherFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'sensor'
+  }]
+  let newFan = []
+  let newWind = []
+  let newSensor = []
+  fanData.value.forEach(item => {
+    let obj = {
+      equipmentId: item.equipmentId,
+      ratedPower: parseInt(item.ratedPower),
+      acurrentValue: parseInt(item.acurrentValue),
+      bcurrentValue: parseInt(item.bcurrentValue),
+      ccurrentValue: parseInt(item.ccurrentValue),
+      serialNumber:item.serialNumber,
+      state: parseInt(item.state)
+    }
+    newFan.push(obj)
+  })
+  winData.value.forEach(item => {
+    newWind.push(changeData(item))
+  })
+  otherData.value.forEach(item => {
+    newSensor.push(changeData(item))
+  })
+  const basicData = {
+    tunnelId: tunnelId,
+    acquisitionList: newFrequency,
+    frequencyChangerList: newFan,
+    windPressureSensorList: newWind,
+    sensorList: newSensor,
+    // shuntList: editFenLiuData.value,
+  }
+  // console.info("🚀 ~ file:index method: line:478 -----",basicData)
+  editEquipment(basicData).then(res => {
+    if (res.code === 1000) {
+      ElMessage.success('修改成功')
+      router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}, 100)
+
+const handleChangeMenu = (e) => {
+  changeIndex.value = e
+}
+
+const getList =async () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  await getEquipmentList(tunnelId).then( res => {
+    if (res.code === 1000) {
+      fanData.value = res.data.frequencyChangerList
+      fanData.value?.forEach( async item => {
+        item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
+      })
+      res.data.windPressureSensorList?.forEach(item => {
+        item.offset = item.offset + 4000
+      })
+      winData.value = res.data.windPressureSensorList
+      winData.value?.forEach( async item => {
+        item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
+      })
+      res.data.sensorList?.forEach(item => {
+        item.offset = item.offset + 4000
+      })
+      otherData.value = res.data.sensorList
+      otherData.value?.forEach( async item => {
+        item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
+      })
+      res.data.acquisitionList.map(item => {
+        item.acquisitionPeriod = item.acquisitionPeriod / 1000
+        if (item.typeKey === 'frequency') {
+          fanFrequency.value = item.acquisitionPeriod
+        } else if (item.typeKey === 'windPressure') {
+          windFrequency.value = item.acquisitionPeriod
+        } else if (item.typeKey === 'sensor') {
+          otherFrequency.value = item.acquisitionPeriod
+        }
+      })
+    }
+    loading.close()
+  })
+}
+const getTunnel = () => {
+  getTunnelDetail(tunnelId).then((res) => {
+    if (res?.code === 1000) {
+      siteId.value = res.data.siteId
+      tunnelName.value = res.data.tunnelName
+    }
+  });
+}
+getTunnel()
+getList()
+</script>
+<style lang="scss">
+.serialNumber{
+  .el-input{
+    width: 580px!important;
+  }
+  .el-input__suffix-inner{
+    .el-icon{
+      width: 3em!important;
+      height: 3em!important;
+      color: #fff!important;
+      svg{
+        width: 3em!important;
+        height: 3em!important;
+      }
+    }
+  }
+}
+.el-select.serialNumber {
+  border-radius: 6px!important;
+  border: 1px solid #05FEFF!important;
+  background-color: transparent!important;
+  .el-select__wrapper{
+    height: 54px!important;
+    color: #FFFFFF!important;
+    font-size: 40px!important;
+    //height: auto!important;
+    line-height: normal!important;
+    border-radius: 6px!important;
+    border: 1px solid #05FEFF!important;
+    background-color: transparent!important;
+  }
+  .el-select__placeholder {
+    height: 54px;
+    line-height: 54px;
+    color: #FFFFFF;
+  }
+}
+
+
+.serialNumber-select.el-popper {
+  background: #064B66 !important;
+  border: 2px solid #05FEFF !important;
+
+  .el-select-dropdown {
+    min-width: 130px !important;
+  }
+  .el-select-dropdown__item.is-hovering{
+    background-color: #064B66 !important;
+  }
+  .el-select-dropdown__item {
+    color: #FFFFFF;
+    border-bottom: 1px solid #05FEFF;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: transparent !important;
+    color: #F7B500;
+  }
+}
+</style>
+<style scoped lang="scss">
+.tunnel-bgc {
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/tunnel/sd_bj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: flex-start;
+
+    .tunnel-name {
+      margin-left: 120px;
+      height: 61px;
+      font-size: 46px;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: 61px;
+    }
+
+    .back-tunnel {
+      cursor: pointer;
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 38px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 23px;
+        width: 33px;
+        height: 33px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+  }
+
+  .device-content {
+    display: flex;
+    justify-content: center;
+    padding-top: 190px;
+
+    .device-box {
+      display: flex;
+      width: 3500px;
+      height: 1600px;
+      background: #064B66;
+      border-radius: 20px;
+      border: 2px solid #05FEFF;
+      box-sizing: border-box;
+
+      .box-left {
+        padding-left: 24px;
+        width: 300px;
+        height: 1596px;
+        background: #0D5A7A;
+        border-radius: 20px 0px 0px 20px;
+
+        :deep(.el-menu) {
+          border-right: none;
+          margin-top: 261px;
+          background-color: #0D5A7A;
+
+          .el-menu-item.is-active {
+            background-image: url(../../assets/images/device/sdgl_xz.png);
+          }
+
+          .el-menu-item {
+            color: #fff;
+            height: 90px;
+            font-size: 40px;
+
+            &:hover {
+              background-color: #0D5A7A;
+            }
+
+            &:first-child {
+              letter-spacing: 120px;
+            }
+
+            &:nth-child(2) {
+              letter-spacing: 120px;
+            }
+
+            //&:nth-child(4) {
+            //  letter-spacing: 40px;
+            //}
+          }
+        }
+      }
+
+      .box-right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        .device-title {
+          margin-top: 60px;
+          line-height: 61px;
+          color: #FFFFFF;
+          display: flex;
+          justify-content: center;
+
+          > span:first-child {
+            font-size: 46px;
+            font-weight: bold;
+          }
+
+          .collection-frequency {
+            height: 60px;
+            display: flex;
+            align-items: center;
+            position: absolute;
+            right: 102px;
+
+            > span:first-child {
+              font-size: 38px !important;
+              white-space: pre;
+              margin-right: 15px;
+            }
+
+            :deep(.el-input__wrapper) {
+              width: 166px;
+              height: 56px;
+              background-color: transparent;
+              box-shadow: none;
+              border-radius: 6px;
+              border: 1px solid #05FEFF;
+              transform: none;
+              transition: none;
+
+              .el-input__inner {
+                height: 54px;
+                font-size: 30px;
+                color: #FFFFFF;
+              }
+
+              .el-input__suffix-inner {
+                font-size: 30px;
+                color: #08B7B8;
+                line-height: 40px;
+              }
+            }
+          }
+        }
+      }
+
+      .btns {
+        width: 100%;
+        margin: 0 auto;
+        position: absolute;
+        bottom: 70px;
+      }
+
+      .device-table {
+        margin-top: 50px;
+        margin-left: 50px;
+        margin-right: 50px;
+
+        .active {
+          color: #FFFFFF;
+          background: #0f7da9;
+        }
+
+        .wind-switch {
+          margin-left: 26px;
+        }
+
+        .switch {
+          margin-top: 22px;
+
+          display: flex;
+          width: 200px;
+          height: 50px;
+          border-radius: 6px;
+          border: 1px solid #05FEFF;
+          overflow: hidden;
+          color: #51A2B3;
+          line-height: 40px;
+          font-size: 36px;
+
+          & > div {
+            flex: 1;
+            text-align: center;
+            cursor: pointer;
+          }
+        }
+
+        :deep(.el-table--fit) {
+          //width: 1780px !important;
+          width: auto;
+        }
+
+        :deep(.cell) {
+          height: 80px;
+          line-height: 80px;
+          color: #fff;
+          font-size: 38px;
+        }
+
+        :deep(.el-table tr) {
+          background-color: #1C5971;
+        }
+
+        :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
+          background-color: #1C5971;
+        }
+
+        :deep(.el-table__row--striped) {
+          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;
+            height: 53px;
+          }
+
+          .el-input__wrapper {
+            border-radius: 6px;
+            border: 1px solid #05FEFF;
+            background-color: transparent;
+
+            .el-input__inner {
+              color: #FFFFFF;
+              font-size: 40px;
+              height: auto;
+              line-height: normal;
+            }
+          }
+        }
+
+        :deep(.el-table__inner-wrapper::before) {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/device-manage/index-origanl.vue b/src/views/device-manage/index-origanl.vue
new file mode 100644
index 0000000..2fc22e5
--- /dev/null
+++ b/src/views/device-manage/index-origanl.vue
@@ -0,0 +1,860 @@
+<template>
+  <div class="tunnel-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="router.back(-1)">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <div class="tunnel-name">
+        {{ tunnelName }}
+      </div>
+      <tunnel-title/>
+    </div>
+    <div class="device-content">
+      <div class="device-box">
+        <div class="box-left">
+          <el-menu
+              default-active="1"
+              @select="handleChangeMenu"
+          >
+            <el-menu-item index="1">
+              <span>风机</span>
+            </el-menu-item>
+            <el-menu-item index="2">
+              <span>风压</span>
+            </el-menu-item>
+            <el-menu-item index="3">
+              <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">
+          <div class="device-title">
+            <span>风机设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="fanFrequency" @change="changeFan">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe
+                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;" table-layout="auto"
+                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
+              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
+              <el-table-column prop="ratedPower" label="额定功率" align="center">
+                <template #default="scope">
+                  <el-input placeholder="额定功率" v-model="scope.row.ratedPower"
+                            @change="changeFanData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
+              <el-table-column prop="acurrentValue" label="A电流阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="A电流" v-model="scope.row.acurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
+              <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
+              <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+<!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
+<!--                <template #default="scope">-->
+<!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
+<!--                             @change="changeFanData(scope.row)" class="serialNumber">-->
+<!--                    <el-option-->
+<!--                        v-for="item in scope.row.serialNumberOption"-->
+<!--                        :key="item.value"-->
+<!--                        :label="item.label"-->
+<!--                        :value="item.value"-->
+<!--                    />-->
+<!--                  </el-select>-->
+<!--                </template>-->
+<!--              </el-table-column>-->
+              <el-table-column prop="state" label="状态" align="center"  width="200">
+                <template #default="scope">
+                  <div class="switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click="scope.row.state = 1;changeFanData(scope.row)"
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state = 0;changeFanData(scope.row)"
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="editEquip">
+              确定
+            </div>
+          </div>
+        </div>
+        <div class="box-right" v-if="changeIndex==2">
+          <div class="device-title">
+            <span>风压设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="windFrequency" @change="changeWind">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe table-layout="auto"
+                      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="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" @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="alarmValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                            @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="miniRange" label="最小范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                            @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="maxRange" label="最大范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                            @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+<!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
+<!--                <template #default="scope">-->
+<!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
+<!--                             @change="changeWindData(scope.row)" class="serialNumber">-->
+<!--                    <el-option-->
+<!--                        v-for="item in scope.row.serialNumberOption"-->
+<!--                        :key="item.value"-->
+<!--                        :label="item.label"-->
+<!--                        :value="item.value"-->
+<!--                    />-->
+<!--                  </el-select>-->
+<!--                </template>-->
+<!--              </el-table-column>-->
+              <el-table-column prop="state" label="状态" align="center" width="200">
+                <template #default="scope">
+                  <div class="switch wind-switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = 1;changeWindData(scope.row)"
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state =  0;changeWindData(scope.row)"
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="editEquip">
+              确定
+            </div>
+          </div>
+        </div>
+        <div class="box-right" v-if="changeIndex==3">
+          <div class="device-title">
+            <span>其他传感器设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="otherFrequency" @change="changeOther">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe table-layout="auto"
+                      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="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" @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="alarmValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                            @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="miniRange" label="最小范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                            @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="maxRange" label="最大范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                            @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+<!--              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">-->
+<!--                <template #default="scope">-->
+<!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
+<!--                             @change="changeOtherData(scope.row)" clearable class="serialNumber">-->
+<!--                    <el-option-->
+<!--                        v-for="item in scope.row.serialNumberOption"-->
+<!--                        :key="item.value"-->
+<!--                        :label="item.label"-->
+<!--                        :value="item.value"-->
+<!--                    />-->
+<!--                  </el-select>-->
+<!--                </template>-->
+<!--              </el-table-column>-->
+              <el-table-column prop="state" label="状态" align="center" width="200">
+                <template #default="scope">
+                  <div class="switch wind-switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = 1;changeOtherData(scope.row)"
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state =  0;changeOtherData(scope.row)"
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="editEquip">
+              确定
+            </div>
+          </div>
+        </div>
+        <div class="box-right" v-if="changeIndex==4">
+          <div class="device-title">
+            <span>分流器设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <el-input type="number" v-model="fenFrequency">
+                <template #suffix>
+                  <span>秒/次</span>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe
+                      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="fenLiuData">
+              <el-table-column prop="name" label="设备名称" align="center"/>
+              <el-table-column prop="offset" label="偏移量" align="center"/>
+              <el-table-column prop="thresholdValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="阈值" v-model="scope.row.thresholdValue"
+                            @change="changeFenData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" label="状态" align="center"  width="200">
+                <template #default="scope">
+                  <div class="switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = 1;changeFenData(scope.row)"
+                    >
+                      启用
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state = 0;changeFenData(scope.row)"
+                    >
+                      停用
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="router.back(-1)">
+              取消
+            </div>
+            <div class="sure-btn" @click="handleEditFen">
+              确定
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ElLoading, ElMessage} from "element-plus";
+import {getEquipmentList, editEquipment, getTunnelDetail, getEquipmentSerialNumberOptions} from "@/api/tunnelManage";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {debounce} from 'lodash'
+
+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 fanFrequency = ref(0)
+const windFrequency = ref(0)
+const otherFrequency = ref(0)
+const changeIndex = ref(1)
+const fanData = ref([])
+const editFanData = ref([])
+const winData = ref([])
+const editWinData = ref([])
+const otherData = ref([])
+const editOtherData = ref([])
+const fenLiuData = ref([])
+const editFenLiuData = ref([])
+const frequencyData = ref([])
+const serialNumberOptions = ref([])
+const siteId = ref(0)
+const tunnelName = ref('')
+const getSerialNumberOptions =async (equipmentId) => {
+  console.log('tunnelId',tunnelId)
+  let {data,code,msg}=await getEquipmentSerialNumberOptions(tunnelId,equipmentId)
+  if(code===1000){
+   return data
+  }else{
+    ElMessage.error(msg)
+  }
+  // getEquipmentSerialNumberOptions(tunnelId,equipmentId).then(res => {
+  //   if (res.code === 1000) {
+  //     serialNumberOptions.value = res.data
+  //   } else {
+  //     ElMessage.error(res.msg)
+  //   }
+  // })
+}
+// getSerialNumberOptions()
+const changeFan = (e) => {
+  // const fanObj = {
+  //   acquisitionPeriod: e * 1000,
+  //   tunnelId: tunnelId,
+  //   typeKey: 'frequency'
+  // }
+  // frequencyData.value.push(fanObj)
+}
+const changeFanData = (row) => {
+  // editFanData.value.push(row)
+}
+const changeWind = (e) => {
+  // const windObj = {
+  //   acquisitionPeriod: e * 1000,
+  //   tunnelId: tunnelId,
+  //   typeKey: 'windPressure'
+  // }
+  // frequencyData.value.push(windObj)
+}
+const changeWindData = (row) => {
+  // editWinData.value.push(row)
+}
+const changeOther = (e) => {
+  // const otherObj = {
+  //   acquisitionPeriod: e * 1000,
+  //   tunnelId: tunnelId,
+  //   typeKey: 'sensor'
+  // }
+  // frequencyData.value.push(otherObj)
+}
+const changeOtherData = (row) => {
+  // editOtherData.value.push(row)
+}
+const changeData = (item) => {
+  return {
+    equipmentId: item.equipmentId,
+    unit: item.unit,
+    alarmValue: item.alarmValue,
+    serialNumber:item.serialNumber,
+    miniRange: parseInt(item.miniRange),
+    maxRange: parseInt(item.maxRange),
+    state: item.state,
+  }
+}
+const editEquip = debounce(() => {
+  let newFrequency = [{
+    acquisitionPeriod: fanFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'frequency'
+  }, {
+    acquisitionPeriod: windFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'windPressure'
+  }, {
+    acquisitionPeriod: otherFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'sensor'
+  }]
+  let newFan = []
+  let newWind = []
+  let newSensor = []
+  fanData.value.forEach(item => {
+    let obj = {
+      equipmentId: item.equipmentId,
+      ratedPower: parseInt(item.ratedPower),
+      acurrentValue: parseInt(item.acurrentValue),
+      bcurrentValue: parseInt(item.bcurrentValue),
+      ccurrentValue: parseInt(item.ccurrentValue),
+      serialNumber:item.serialNumber,
+      state: parseInt(item.state)
+    }
+    newFan.push(obj)
+  })
+  winData.value.forEach(item => {
+    newWind.push(changeData(item))
+  })
+  otherData.value.forEach(item => {
+    newSensor.push(changeData(item))
+  })
+  const basicData = {
+    tunnelId: tunnelId,
+    acquisitionList: newFrequency,
+    frequencyChangerList: newFan,
+    windPressureSensorList: newWind,
+    sensorList: newSensor,
+    // shuntList: editFenLiuData.value,
+  }
+  // console.info("🚀 ~ file:index method: line:478 -----",basicData)
+  editEquipment(basicData).then(res => {
+    if (res.code === 1000) {
+      ElMessage.success('修改成功')
+      router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}, 100)
+
+const handleChangeMenu = (e) => {
+  changeIndex.value = e
+}
+
+const getList =async () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  await getEquipmentList(tunnelId).then( res => {
+    if (res.code === 1000) {
+      fanData.value = res.data.frequencyChangerList
+      fanData.value?.forEach( async item => {
+        item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
+      })
+      res.data.windPressureSensorList?.forEach(item => {
+        item.offset = item.offset + 4000
+      })
+      winData.value = res.data.windPressureSensorList
+      winData.value?.forEach( async item => {
+        item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
+      })
+      res.data.sensorList?.forEach(item => {
+        item.offset = item.offset + 4000
+      })
+      otherData.value = res.data.sensorList
+      otherData.value?.forEach( async item => {
+        item.serialNumberOption =await getSerialNumberOptions(item.equipmentId)
+      })
+      res.data.acquisitionList.map(item => {
+        item.acquisitionPeriod = item.acquisitionPeriod / 1000
+        if (item.typeKey === 'frequency') {
+          fanFrequency.value = item.acquisitionPeriod
+        } else if (item.typeKey === 'windPressure') {
+          windFrequency.value = item.acquisitionPeriod
+        } else if (item.typeKey === 'sensor') {
+          otherFrequency.value = item.acquisitionPeriod
+        }
+      })
+    }
+    loading.close()
+  })
+}
+const getTunnel = () => {
+  getTunnelDetail(tunnelId).then((res) => {
+    if (res?.code === 1000) {
+      siteId.value = res.data.siteId
+      tunnelName.value = res.data.tunnelName
+    }
+  });
+}
+getTunnel()
+getList()
+</script>
+<style lang="scss">
+.serialNumber{
+  .el-input{
+    width: 580px!important;
+  }
+  .el-input__suffix-inner{
+    .el-icon{
+      width: 3em!important;
+      height: 3em!important;
+      color: #fff!important;
+      svg{
+        width: 3em!important;
+        height: 3em!important;
+      }
+    }
+  }
+}
+.el-select.serialNumber {
+  border-radius: 6px!important;
+  border: 1px solid #05FEFF!important;
+  background-color: transparent!important;
+  .el-select__wrapper{
+    height: 54px!important;
+    color: #FFFFFF!important;
+    font-size: 40px!important;
+    //height: auto!important;
+    line-height: normal!important;
+    border-radius: 6px!important;
+    border: 1px solid #05FEFF!important;
+    background-color: transparent!important;
+  }
+  .el-select__placeholder {
+    height: 54px;
+    line-height: 54px;
+    color: #FFFFFF;
+  }
+}
+
+
+.serialNumber-select.el-popper {
+  background: #064B66 !important;
+  border: 2px solid #05FEFF !important;
+
+.el-select-dropdown {
+    min-width: 130px !important;
+  }
+  .el-select-dropdown__item.is-hovering{
+    background-color: #064B66 !important;
+  }
+  .el-select-dropdown__item {
+    color: #FFFFFF;
+    border-bottom: 1px solid #05FEFF;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: transparent !important;
+    color: #F7B500;
+  }
+}
+</style>
+<style scoped lang="scss">
+.tunnel-bgc {
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/tunnel/sd_bj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: flex-start;
+
+    .tunnel-name {
+      margin-left: 120px;
+      height: 61px;
+      font-size: 46px;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: 61px;
+    }
+
+    .back-tunnel {
+      cursor: pointer;
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 38px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 23px;
+        width: 33px;
+        height: 33px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+  }
+
+  .device-content {
+    display: flex;
+    justify-content: center;
+    padding-top: 190px;
+
+    .device-box {
+      display: flex;
+      width: 3500px;
+      height: 1600px;
+      background: #064B66;
+      border-radius: 20px;
+      border: 2px solid #05FEFF;
+      box-sizing: border-box;
+
+      .box-left {
+        padding-left: 24px;
+        width: 300px;
+        height: 1596px;
+        background: #0D5A7A;
+        border-radius: 20px 0px 0px 20px;
+
+        :deep(.el-menu) {
+          border-right: none;
+          margin-top: 261px;
+          background-color: #0D5A7A;
+
+          .el-menu-item.is-active {
+            background-image: url(../../assets/images/device/sdgl_xz.png);
+          }
+
+          .el-menu-item {
+            color: #fff;
+            height: 90px;
+            font-size: 40px;
+
+            &:hover {
+              background-color: #0D5A7A;
+            }
+
+            &:first-child {
+              letter-spacing: 120px;
+            }
+
+            &:nth-child(2) {
+              letter-spacing: 120px;
+            }
+
+            //&:nth-child(4) {
+            //  letter-spacing: 40px;
+            //}
+          }
+        }
+      }
+
+      .box-right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        .device-title {
+          margin-top: 60px;
+          line-height: 61px;
+          color: #FFFFFF;
+          display: flex;
+          justify-content: center;
+
+          > span:first-child {
+            font-size: 46px;
+            font-weight: bold;
+          }
+
+          .collection-frequency {
+            height: 60px;
+            display: flex;
+            align-items: center;
+            position: absolute;
+            right: 102px;
+
+            > span:first-child {
+              font-size: 38px !important;
+              white-space: pre;
+              margin-right: 15px;
+            }
+
+            :deep(.el-input__wrapper) {
+              width: 166px;
+              height: 56px;
+              background-color: transparent;
+              box-shadow: none;
+              border-radius: 6px;
+              border: 1px solid #05FEFF;
+              transform: none;
+              transition: none;
+
+              .el-input__inner {
+                height: 54px;
+                font-size: 30px;
+                color: #FFFFFF;
+              }
+
+              .el-input__suffix-inner {
+                font-size: 30px;
+                color: #08B7B8;
+                line-height: 40px;
+              }
+            }
+          }
+        }
+      }
+
+      .btns {
+        width: 100%;
+        margin: 0 auto;
+        position: absolute;
+        bottom: 70px;
+      }
+
+      .device-table {
+        margin-top: 50px;
+        margin-left: 50px;
+        margin-right: 50px;
+
+        .active {
+          color: #FFFFFF;
+          background: #0f7da9;
+        }
+
+        .wind-switch {
+          margin-left: 26px;
+        }
+
+        .switch {
+          margin-top: 22px;
+
+          display: flex;
+          width: 200px;
+          height: 50px;
+          border-radius: 6px;
+          border: 1px solid #05FEFF;
+          overflow: hidden;
+          color: #51A2B3;
+          line-height: 40px;
+          font-size: 36px;
+
+          & > div {
+            flex: 1;
+            text-align: center;
+            cursor: pointer;
+          }
+        }
+
+        :deep(.el-table--fit) {
+          //width: 1780px !important;
+          width: auto;
+        }
+
+        :deep(.cell) {
+          height: 80px;
+          line-height: 80px;
+          color: #fff;
+          font-size: 38px;
+        }
+
+        :deep(.el-table tr) {
+          background-color: #1C5971;
+        }
+
+        :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
+          background-color: #1C5971;
+        }
+
+        :deep(.el-table__row--striped) {
+          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;
+            height: 53px;
+          }
+
+          .el-input__wrapper {
+            border-radius: 6px;
+            border: 1px solid #05FEFF;
+            background-color: transparent;
+
+            .el-input__inner {
+              color: #FFFFFF;
+              font-size: 40px;
+              height: auto;
+              line-height: normal;
+            }
+          }
+        }
+
+        :deep(.el-table__inner-wrapper::before) {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/edit/edit-new.vue b/src/views/edit/edit-new.vue
new file mode 100644
index 0000000..f1eed0f
--- /dev/null
+++ b/src/views/edit/edit-new.vue
@@ -0,0 +1,415 @@
+<template>
+  <div id="main">
+    <div class="box-top">
+      <div class="back-tunnel" @click="handleGoTunnelMgr">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <tunnel-title/>
+      <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="230px">
+        <el-form-item label="隧道名称">
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
+        </el-form-item>
+        <el-form-item label="隧道简称">
+          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
+        </el-form-item>
+        <el-form-item label="序列号前缀" prop="serialNumberPrefix">
+          <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
+        </el-form-item>
+        <!--        <el-form-item label="序列号1" prop="serialNumber">-->
+        <!--          <el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item label="序列号2" prop="serialNumberOne">-->
+        <!--          <el-input v-model="form.serialNumberOne" placeholder="请输入序列号2"/>-->
+        <!--        </el-form-item>-->
+
+
+        <el-form-item label="PLC序列号" prop="serialNumber">
+          <el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>
+        </el-form-item>
+        <div style="display: flex;flex-direction: column">
+          <div style="display:flex;align-items:center;justify-content:flex-end;font-size: 38px;color: #08B7B8;cursor: pointer;">
+            添加序列号
+            <el-icon size="74" color="#08B7B8" style="margin-left: 20px;" @click="addSerialNumber">
+              <CirclePlus/>
+            </el-icon>
+          </div>
+          <div v-for="(item,index) in form.tunnelGatewayVoList" :key="index">
+            <el-form-item label="序列号名称">
+              <div style="flex: 1;display: flex;">
+                <el-input v-model="item.serialNumberType" placeholder="请输入序列号名称" :disabled="item.isUse"
+                          :style="{'margin-right':item.isUse? '94px':''}" :title="item.isUse?'该序列号正在使用中, 暂不能修改':''"/>
+                <el-icon v-if="!item.isUse" size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer"
+                         @click="delSerialNumber(index)">
+                  <Remove/>
+                </el-icon>
+              </div>
+            </el-form-item>
+            <el-form-item :label="item.serialNumberType+'序列号'" class="serialNumber-name-overflow-hidden">
+              <el-input v-model="item.serialNumber" :placeholder="'请输入'+item.serialNumberType+'序列号'"
+                        style="margin-right: 94px" :disabled="item.isUse" :title="item.isUse?'该序列号正在使用中, 暂不能修改':''"/>
+            </el-form-item>
+          </div>
+        </div>
+        <!--                <div style="display: flex;flex-direction: column">-->
+        <!--                  <div v-for="(item,index) in form.tunnelGatewayVoList" :key="index" >-->
+        <!--                    <el-form-item :label="'序列号'+(index+2)">-->
+        <!--                      <div style="flex: 1;display: flex;">-->
+        <!--                        <el-input v-model="item.serialNumberOne" :placeholder="'请输入序列号'+(index+2)" />-->
+        <!--                        <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="addSerialNumber" v-if="index===0">-->
+        <!--                          <CirclePlus/>-->
+        <!--                        </el-icon>-->
+        <!--                        <el-icon v-else size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="delSerialNumber(index)" >-->
+        <!--                          <Remove/>-->
+        <!--                        </el-icon>-->
+        <!--                      </div>-->
+        <!--                    </el-form-item>-->
+        <!--                  </div>-->
+        <!--                </div>-->
+        <el-form-item label="隧道长度">
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
+        </el-form-item>
+        <el-form-item label="施工长度">
+          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
+        </el-form-item>
+        <el-form-item label="基准频率" prop="referenceFrequency">
+          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label="升频时间(分钟)" prop="upTime" label-width="280px">
+            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="升频率" prop="upFrequency">
+            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label="降频时间(分钟)" prop="dropTime" label-width="280px">
+            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="降频率" prop="dropFrequency">
+            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <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, getSerialNumberOnUse} from "@/api/tunnelManage";
+import {ElLoading, ElMessage} from "element-plus";
+import {initSceneData} from "@/api/tunnelScene";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {debounce} from 'lodash'
+
+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 modelEquipmentList = ref(null)
+const isShowRemove = ref(false)
+const form = ref({
+  tunnelName: "",
+  serialNumberPrefix: '',
+  // serialNumber: '',
+  serialNumber: '',
+  totalLength: "",
+  referenceFrequency: '',
+  upTime: '',
+  upFrequency: '',
+  dropTime: '',
+  dropFrequency: '',
+  isDefault: false,
+  remarks: "",
+  tunnelGatewayVoList: []
+});
+const addSerialNumber = () => {
+  form.value.tunnelGatewayVoList.push({
+    serialNumber: '',
+    serialNumberType: '',
+  })
+}
+const delSerialNumber = (index) => {
+  form.value.tunnelGatewayVoList.splice(index, 1)
+}
+const getSerialNumberOnUseList = async () => {
+  let {data, code} = await getSerialNumberOnUse(tunnelId)
+  if (code === 1000) {
+    return data
+  }
+}
+const getTunnel = async () => {
+  let serialNumberOnUseList = await getSerialNumberOnUseList()
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  await getTunnelDetail(tunnelId).then((res) => {
+    if (res?.code === 1000) {
+      res.data.tunnelGatewayVoList?.forEach((item) => {
+        serialNumberOnUseList?.forEach((serialNumberOnUseItem) => {
+          item.isUse = item.serialNumber == serialNumberOnUseItem;
+        })
+      })
+      form.value = res.data;
+    }
+    loading.close()
+  });
+};
+getTunnel();
+const tunnelLength = computed(() => form.value.totalLength);
+const handleGotoDevice = () => {
+  if (type === 'bySite') {
+    router.push('/device/' + tunnelId + '/bySite/' + userId)
+  } else if (type === 'byHome') {
+    router.push('/device/' + tunnelId + '/byHome/' + userId)
+  }
+};
+const handleGoTunnelMgr = () => {
+  router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
+};
+const getTunnelInfo = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '修改中...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  initSceneData(tunnelId).then((res) => {
+    modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
+    if (modelEquipmentList.value === null) {
+      modelEquipmentList.value = []
+    }
+    const data = {
+      tunnelId: tunnelId,
+      ...form.value,
+      tunnelGatewayVoList: form.value.tunnelGatewayVoList,
+      tunnelLength: form.value.totalLength,
+      modelEquipmentList: modelEquipmentList.value,
+    };
+    editTunnel(data).then((res) => {
+      if (res?.code === 1000) {
+        loading.close()
+        ElMessage.success(res.msg);
+        router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
+      } else {
+        ElMessage.error(res.msg);
+        loading.close()
+
+      }
+    });
+  })
+}
+const handleSave = debounce(() => {
+  getTunnelInfo()
+}, 100)
+</script>
+<style lang="scss" scoped>
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+#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::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  // 滚动条轨道
+  .edit-box::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  .edit-box::-webkit-scrollbar-thumb {
+    background: rgb(8, 183, 184);
+    border-radius: 10px;
+  }
+  .edit-box {
+    z-index: 2;
+    position: absolute;
+    top: 250px;
+    left: 80px;
+    width: 1000px;
+    height: 2000px;
+    overflow-y: scroll;
+    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;
+        }
+
+        .el-input__suffix-inner {
+          font-size: 30px;
+          color: #08B7B8;
+          line-height: 40px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/edit/edit-or.vue b/src/views/edit/edit-or.vue
new file mode 100644
index 0000000..2a964b3
--- /dev/null
+++ b/src/views/edit/edit-or.vue
@@ -0,0 +1,342 @@
+<template>
+  <div id="main">
+    <div class="box-top">
+      <div class="back-tunnel" @click="handleGoTunnelMgr">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <tunnel-title/>
+      <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="230px">
+        <el-form-item label="隧道名称">
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
+        </el-form-item>
+        <el-form-item label="隧道简称">
+          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
+        </el-form-item>
+        <el-form-item label="序列号前缀" prop="serialNumberPrefix">
+          <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
+        </el-form-item>
+        <el-form-item label="序列号1" prop="serialNumber">
+          <el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>
+        </el-form-item>
+<!--        <el-form-item label="序列号2" prop="serialNumberOne">-->
+<!--          <el-input v-model="form.serialNumberOne" placeholder="请输入序列号2"/>-->
+<!--        </el-form-item>-->
+
+
+        <!--        <el-form-item label="PLC序列号" prop="serialNumber">-->
+        <!--          <el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>-->
+        <!--        </el-form-item>-->
+        <!--        <div style="display: flex;flex-direction: column">-->
+        <!--          <div v-for="(item,index) in form.serialNumberList" :key="index" >-->
+        <!--            <el-form-item :label="'序列号'+(index+2)">-->
+        <!--              <div style="flex: 1;display: flex;">-->
+        <!--                <el-input v-model="item.serialNumberOne" :placeholder="'请输入序列号'+(index+2)" />-->
+        <!--              </div>-->
+        <!--            </el-form-item>-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <el-form-item label="隧道长度">
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
+        </el-form-item>
+        <el-form-item label="施工长度">
+          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
+        </el-form-item>
+        <el-form-item label="基准频率" prop="referenceFrequency">
+          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label="升频时间(分钟)" prop="upTime" label-width="280px">
+            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="升频率" prop="upFrequency">
+            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label="降频时间(分钟)" prop="dropTime" label-width="280px">
+            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="降频率" prop="dropFrequency">
+            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <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 {ElLoading, ElMessage} from "element-plus";
+import {initSceneData} from "@/api/tunnelScene";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {debounce} from 'lodash'
+
+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 modelEquipmentList = ref(null)
+const form = ref({
+  tunnelName: "",
+  serialNumberPrefix: '',
+  serialNumberOne: '',
+  serialNumber: '',
+  totalLength: "",
+  referenceFrequency: '',
+  upTime: '',
+  upFrequency: '',
+  dropTime: '',
+  dropFrequency: '',
+  isDefault: false,
+  remarks: "",
+  serialNumberList: []
+});
+const getTunnel = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  getTunnelDetail(tunnelId).then((res) => {
+    if (res?.code === 1000) {
+      res.data.serialNumberList = res.data.serialNumberList?.map(item => ({serialNumberOne: item}))
+      form.value = res.data;
+    }
+    loading.close()
+  });
+};
+getTunnel();
+const tunnelLength = computed(() => form.value.totalLength);
+const handleGotoDevice = () => {
+  if (type === 'bySite') {
+    router.push('/device/' + tunnelId + '/bySite/' + userId)
+  } else if (type === 'byHome') {
+    router.push('/device/' + tunnelId + '/byHome/' + userId)
+  }
+};
+const handleGoTunnelMgr = () => {
+  router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
+};
+const getTunnelInfo = () => {
+  initSceneData(tunnelId).then((res) => {
+    modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
+    if (modelEquipmentList.value === null) {
+      modelEquipmentList.value = []
+    }
+
+    let serialNumberList = form.value.serialNumberList.map(item => item.serialNumberOne)
+    const data = {
+      tunnelId: tunnelId,
+      ...form.value,
+      serialNumberList: serialNumberList,
+      tunnelLength: form.value.totalLength,
+      modelEquipmentList: modelEquipmentList.value,
+    };
+    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);
+      }
+    });
+  })
+}
+const handleSave = debounce(() => {
+  getTunnelInfo()
+}, 100)
+</script>
+<style lang="scss" scoped>
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+#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: 1000px;
+    //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;
+        }
+
+        .el-input__suffix-inner {
+          font-size: 30px;
+          color: #08B7B8;
+          line-height: 40px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/edit/edit-orignal.vue b/src/views/edit/edit-orignal.vue
new file mode 100644
index 0000000..7aef199
--- /dev/null
+++ b/src/views/edit/edit-orignal.vue
@@ -0,0 +1,342 @@
+<template>
+  <div id="main">
+    <div class="box-top">
+      <div class="back-tunnel" @click="handleGoTunnelMgr">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <tunnel-title/>
+      <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="230px">
+        <el-form-item label="隧道名称">
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
+        </el-form-item>
+        <el-form-item label="隧道简称">
+          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
+        </el-form-item>
+        <el-form-item label="序列号前缀" prop="serialNumberPrefix">
+          <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
+        </el-form-item>
+        <el-form-item label="序列号1" prop="serialNumber">
+          <el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>
+        </el-form-item>
+        <el-form-item label="序列号2" prop="serialNumberOne">
+          <el-input v-model="form.serialNumberOne" placeholder="请输入序列号2"/>
+        </el-form-item>
+
+
+        <!--        <el-form-item label="PLC序列号" prop="serialNumber">-->
+        <!--          <el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>-->
+        <!--        </el-form-item>-->
+        <!--        <div style="display: flex;flex-direction: column">-->
+        <!--          <div v-for="(item,index) in form.serialNumberList" :key="index" >-->
+        <!--            <el-form-item :label="'序列号'+(index+2)">-->
+        <!--              <div style="flex: 1;display: flex;">-->
+        <!--                <el-input v-model="item.serialNumberOne" :placeholder="'请输入序列号'+(index+2)" />-->
+        <!--              </div>-->
+        <!--            </el-form-item>-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <el-form-item label="隧道长度">
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
+        </el-form-item>
+        <el-form-item label="施工长度">
+          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
+        </el-form-item>
+        <el-form-item label="基准频率" prop="referenceFrequency">
+          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label="升频时间(分钟)" prop="upTime" label-width="280px">
+            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="升频率" prop="upFrequency">
+            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label="降频时间(分钟)" prop="dropTime" label-width="280px">
+            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="降频率" prop="dropFrequency">
+            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <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 {ElLoading, ElMessage} from "element-plus";
+import {initSceneData} from "@/api/tunnelScene";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {debounce} from 'lodash'
+
+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 modelEquipmentList = ref(null)
+const form = ref({
+  tunnelName: "",
+  serialNumberPrefix: '',
+  serialNumberOne: '',
+  serialNumber: '',
+  totalLength: "",
+  referenceFrequency: '',
+  upTime: '',
+  upFrequency: '',
+  dropTime: '',
+  dropFrequency: '',
+  isDefault: false,
+  remarks: "",
+  serialNumberList: []
+});
+const getTunnel = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  getTunnelDetail(tunnelId).then((res) => {
+    if (res?.code === 1000) {
+      res.data.serialNumberList = res.data.serialNumberList?.map(item => ({serialNumberOne: item}))
+      form.value = res.data;
+    }
+    loading.close()
+  });
+};
+getTunnel();
+const tunnelLength = computed(() => form.value.totalLength);
+const handleGotoDevice = () => {
+  if (type === 'bySite') {
+    router.push('/device/' + tunnelId + '/bySite/' + userId)
+  } else if (type === 'byHome') {
+    router.push('/device/' + tunnelId + '/byHome/' + userId)
+  }
+};
+const handleGoTunnelMgr = () => {
+  router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
+};
+const getTunnelInfo = () => {
+  initSceneData(tunnelId).then((res) => {
+    modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
+    if (modelEquipmentList.value === null) {
+      modelEquipmentList.value = []
+    }
+
+    let serialNumberList = form.value.serialNumberList.map(item => item.serialNumberOne)
+    const data = {
+      tunnelId: tunnelId,
+      ...form.value,
+      serialNumberList: serialNumberList,
+      tunnelLength: form.value.totalLength,
+      modelEquipmentList: modelEquipmentList.value,
+    };
+    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);
+      }
+    });
+  })
+}
+const handleSave = debounce(() => {
+  getTunnelInfo()
+}, 100)
+</script>
+<style lang="scss" scoped>
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+#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: 1000px;
+    //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;
+        }
+
+        .el-input__suffix-inner {
+          font-size: 30px;
+          color: #08B7B8;
+          line-height: 40px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/tunnel-manage/index-new.vue b/src/views/tunnel-manage/index-new.vue
new file mode 100644
index 0000000..a947744
--- /dev/null
+++ b/src/views/tunnel-manage/index-new.vue
@@ -0,0 +1,1093 @@
+<template>
+  <div class="tunnel-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="handleGoSiteOrIndex">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <div class="site-name">
+        {{ siteName }}
+      </div>
+      <!--      <div class="model-change">-->
+      <!--        <div class="model" @click="clickModel=1;showNull=false">-->
+      <!--          <div class="card-bg"></div>-->
+      <!--          <span>卡片模式</span>-->
+      <!--        </div>-->
+      <!--        <div class="model" @click="clickModel=2;getSiteImg()">-->
+      <!--          <div class="img-bg"></div>-->
+      <!--          <span>图纸导航</span>-->
+      <!--        </div>-->
+      <!--      </div>-->
+      <tunnel-title/>
+      <div class="all-del-btn" v-if="showOperation">
+        <div class="all-btn" style=" margin-right: 40px;" v-if="showAddIcon" @click="handleAdd">
+          添加
+        </div>
+        <div class="all-btn" @click="handleChooseAll">
+          全选
+        </div>
+        <div class="all-btn del-btn" @click="handleMoreDelete">
+          删除
+        </div>
+      </div>
+    </div>
+    <div class="box-content" v-if="clickModel===1">
+      <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>
+          <el-checkbox v-if="!item.isDefault" v-model="item.checked" size="large" @change="handleClickSite(item)"/>
+          <span v-else>默认</span>
+        </div>
+        <div class="box-center">
+          <div>
+            <div class="left-img" @click="handlePreview(item.tunnelId)"></div>
+            <div>
+              <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.tunnelId)">
+                <div class="edit-icon"></div>
+                <div>隧道编辑</div>
+              </div>
+              <div class="edit-btn" @click.stop="handleEditDevice(item.tunnelId)">
+                <div class="edit-icon-two"></div>
+                <div>设备管理</div>
+              </div>
+            </div>
+          </div>
+          <div class="tunnel-right">
+            <div>
+              <!--              <div class="fan-icon"></div>-->
+              <!--              <span>风机异常</span>-->
+            </div>
+            <div class="icons-block">
+              <div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
+                <div :style="{ backgroundImage: 'url(' +getImageUrl(equItem.icon)+')' }" class="icon"></div>
+                <span>{{ equItem.name }}：{{ item.tunnelEquipmentAmountInfo[equItem.type] }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="site-box add-box" @click="handleAdd" v-if="showOperation">
+        <div class="add-icon"></div>
+        <div style="cursor: pointer">添加隧道</div>
+      </div>
+    </div>
+    <div v-else>
+      <div v-if="showNull" class="showNull">
+        暂无图纸~ 请前往站点管理上传图纸~
+      </div>
+      <div class="img-box" v-else>
+        <!--        @/assets/images/tunnel/img.png-->
+        <!--        <img :src="'data:image/png;base64,'+siteImage" style="width:3500px;height:1789px" id="imgModel" usemap="#image"-->
+        <!--             alt="" @click="clickHandler">-->
+        <map name="image" id="image">
+          <area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
+                :title="item.tunnelId+'隧道'" :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId)">
+        </map>
+      </div>
+    </div>
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
+      <div class="siteId">
+        <span>{{ title }}</span>
+      </div>
+      <el-form :model="form" :label-position="right" label-width="230px" :rules="formRules" ref="formInstance">
+        <el-form-item label="隧道名称" prop="tunnelName">
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
+        </el-form-item>
+        <el-form-item label="隧道简称" prop="tunnelAlias">
+          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
+        </el-form-item>
+        <el-form-item label="序列号前缀" prop="serialNumberPrefix">
+          <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
+        </el-form-item>
+        <!--        <el-form-item label="序列号1" prop="serialNumber">-->
+        <!--          <el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item label="序列号2" prop="serialNumberOne">-->
+        <!--          <el-input v-model="form.serialNumberOne" placeholder="请输入序列号2"/>-->
+        <!--        </el-form-item>-->
+
+        <el-form-item label="PLC序列号" prop="serialNumber">
+          <el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>
+        </el-form-item>
+        <div style="display: flex;flex-direction: column">
+          <div v-for="(item,index) in serialNumberList" :key="index">
+            <el-form-item label="序列号名称">
+              <div style="flex: 1;display: flex;">
+                <el-input v-model="item.serialNumberType" placeholder="请输入序列号名称"/>
+                <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="addSerialNumber"
+                         v-if="index===0">
+                  <CirclePlus/>
+                </el-icon>
+                <el-icon v-else size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer"
+                         @click="delSerialNumber(index)">
+                  <Remove/>
+                </el-icon>
+              </div>
+            </el-form-item>
+            <el-form-item :label="item.serialNumberType+'序列号'" class="serialNumber-name-overflow-hidden">
+              <el-input v-model="item.serialNumber" :placeholder="'请输入'+item.serialNumberType+'序列号'" style="margin-right: 94px"/>
+            </el-form-item>
+          </div>
+        </div>
+        <!--                <div style="display: flex;flex-direction: column">-->
+        <!--                  <div v-for="(item,index) in serialNumberList" :key="index" >-->
+        <!--                    <el-form-item :label="'序列号'+(index+2)">-->
+        <!--                      <div style="flex: 1;display: flex;">-->
+        <!--                        <el-input v-model="item.serialNumber" :placeholder="'请输入序列号'+(index+2)" />-->
+        <!--                        <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="addSerialNumber" v-if="index===0">-->
+        <!--                          <CirclePlus/>-->
+        <!--                        </el-icon>-->
+        <!--                        <el-icon v-else size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="delSerialNumber(index)" >-->
+        <!--                          <Remove/>-->
+        <!--                        </el-icon>-->
+        <!--                      </div>-->
+        <!--                    </el-form-item>-->
+        <!--                  </div>-->
+        <!--                </div>-->
+        <el-form-item label="隧道长度" prop="totalLength">
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
+        </el-form-item>
+        <el-form-item label="施工长度" prop="constructionLength">
+          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
+        </el-form-item>
+        <el-form-item label="基准频率" prop="referenceFrequency">
+          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label="升频时间(分钟)" prop="upTime" label-width="300px">
+            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="升频率" prop="upFrequency">
+            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label="降频时间(分钟)" prop="dropTime" label-width="300px">
+            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="降频率" prop="dropFrequency">
+            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <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 class="btns">
+        <div class="cancel-btn" @click="isVisited=false">
+          取消
+        </div>
+        <div class="sure-btn" @click="handleSubmit(formInstance)">
+          确定
+        </div>
+      </div>
+    </el-dialog>
+    <div class="pagination">
+      <span @click="firstPage" v-if="showFirst">首页</span>
+      <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
+                     :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
+                     @current-change="handleCurrentChange" :hide-on-single-page="true"/>
+      <span @click="lastPage" v-if="showFirst">尾页</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
+import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
+import {getSiteDrawing, getSiteDetail} from "@/api/site";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {getTunnelBySiteId} from "@/api/largeScreen";
+import {debounce} from 'lodash'
+
+const serialNumberList = ref([
+  {
+    serialNumber: '',
+    serialNumberType: ''
+  }
+])
+
+const validateNumber = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
+const validateSerialNumberPrefix = (rule, value) => {
+  return value.length > 13 && value.slice(0, -2) == form.value.serialNumberPrefix;
+}
+const router = useRouter()
+const siteImage = ref()
+const showAddIcon = ref(false)
+const params = router.currentRoute.value.params;
+const siteId = reactive(params.siteId)
+const userId = reactive(params.userId)
+const type = reactive(params.type)
+const formRules = ref({
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
+  tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
+  serialNumberPrefix: [
+    {required: true, message: '请输入序列号前缀', trigger: ['blur', 'change']},
+    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的序列号前缀', trigger: ['blur', 'change']},
+    {min: 14, max: 14, message: '隧道序列号前缀长度为14位', trigger: ['blur', 'change']},
+  ],
+  serialNumber: [
+    {required: true, message: '请输入PLC序列号', trigger: ['blur', 'change']},
+    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的PLC序列号', trigger: ['blur', 'change']},
+    {min: 16, max: 16, message: '隧道PLC序列号长度为16位', trigger: ['blur', 'change']},
+    {validator: validateSerialNumberPrefix, message: '同一隧道的序列号前缀需相同', trigger: ['blur', 'change']}
+  ],
+  serialNumberOne: [
+    // {required: true, message: '请输入序列号2', trigger: ['blur', 'change']},
+    // {validator: validateNumber, message: '请输入英文、数字、英文数字组合的序列号2', trigger: ['blur', 'change']},
+    // { min:16,max:16,message: '隧道序列号2长度为16位',trigger: ['blur', 'change']},
+    // {validator: validateSerialNumberOnePrefix, message: '同一隧道的序列号前缀需相同', trigger: ['blur', 'change']}
+  ],
+  totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
+  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
+  referenceFrequency: [{required: true, message: '请输入基准频率', trigger: ['blur', 'change']}],
+  upTime: [{required: true, message: '请选择升频时间', trigger: ['blur', 'change']}],
+  upFrequency: [{required: true, message: '请输入升频率', trigger: ['blur', 'change']}],
+  dropTime: [{required: true, message: '请选择降频时间', trigger: ['blur', 'change']}],
+  dropFrequency: [{required: true, message: '请输入降频率', trigger: ['blur', 'change']}]
+})
+let clickModel = ref(1)
+const showFirst = ref(false)
+const showOperation = ref(true)
+const formInstance = ref()
+const tunnelList = ref([])
+const coordsList = ref([
+  {
+    tunnelId: 1,
+    coords: '767,1117,793,1182,2379,682,2437,454,2349,505,2298,666,2221,531,2153,578,2212,692,765,1126',
+  }, {
+    tunnelId: 1,
+    coords: '863,1475,1135,1494,2321,1078,3023,801,3214,703,3288,752,2300,1154,1560,1438,1170,1554,844,1529',
+  }, {
+    tunnelId: 94,
+    coords: '1181,1364,2105,622,2005,589,1116,1324'
+  }
+])
+const iconsList = ref([
+  {
+    icon: 'sd_icon_fj.png',
+    name: '风机',
+    type: 'frequency',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_sd.png',
+    name: '湿度',
+    type: 'humidness',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fy.png',
+    name: '风压',
+    type: 'windPressure',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_yq.png',
+    name: '氧气',
+    type: 'oxygen',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fs.png',
+    name: '风速',
+    type: 'windSpeed',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fc.png',
+    name: '粉尘',
+    type: 'dust',
+    num: 1
+  },
+  {
+    icon: 'sd_icon_wd.png',
+    name: '温度',
+    type: 'temperature',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_qt.png',
+    name: '有害气体',
+    type: 'harmfulGas',
+    num: 0
+  },
+])
+const title = ref('新增隧道')
+const showNull = ref(false);
+const isVisited = ref(false);
+const tunnelIds = ref([])
+const tunnelNameList = ref([])
+const siteName = ref(localStorage.getItem('site'))
+const form = ref({
+  tunnelName: '',
+  tunnelAlias: '',
+  serialNumberPrefix: '',
+  serialNumber: '',
+  // serialNumberOne: '',
+  totalLength: '',
+  referenceFrequency: '',
+  upTime: 0,
+  upFrequency: '',
+  dropTime: 0,
+  dropFrequency: 0,
+  remarks: '',
+  isDefault: false
+});
+const isEdit = ref(false)
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 12
+});
+const total = ref(0);
+onMounted(() => {
+  showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
+})
+const addSerialNumber = () => {
+  serialNumberList.value.push({
+    serialNumber: '',
+    serialNumberType: '',
+  })
+}
+const delSerialNumber = (index) => {
+  serialNumberList.value.splice(index, 1)
+}
+const getSiteImg = () => {
+  showNull.value = false
+  getSiteDrawing(siteId).then((res) => {
+    if (res.code === 1000) {
+      if (res.data.drawingData === null) {
+        // ElMessageBox.confirm('暂无图纸, 是否前往站点管理上传图纸?', '系统提示', {
+        //   confirmButtonText: '确定',
+        //   cancelButtonText: '取消',
+        //   type: 'warning'
+        // }).then(() => {
+        //   router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
+        // }).catch(()=>{
+        showNull.value = true
+        // })
+      } else {
+        showNull.value = false
+        siteImage.value = res.data.drawingData
+      }
+    }
+  });
+}
+const clickHot = (id) => {
+  console.log('点击热区===============')
+  router.push('/' + id + '/' + siteId)
+}
+// const testArr=[]
+const clickHandler = (id) => {
+  // let obj=e.offsetX+','+e.offsetY
+  // testArr.push(obj)
+  // console.log('正确数值',testArr.map(item=>item).join())
+  // console.log('点击',e.offsetX+','+e.offsetY+',')
+  // console.log('图纸', document.getElementById('imgModel').getBoundingClientRect().x,document.getElementById('imgModel').getBoundingClientRect().y)
+}
+const handleGoSiteOrIndex = () => {
+  if (type === 'bySite') {
+    router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
+  } else if (type === 'byHome') {
+    router.push('/' + 'siteToHome/' + siteId)
+  }
+}
+//根据站点id获取隧道信息
+const getTunnel = (id) => {
+  getSiteDetail(id).then((res) => {
+    if (res?.code === 1000) {
+      siteName.value = res.data.siteName
+    }
+  });
+}
+getTunnel(siteId)
+const getList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  getTunnelList({
+    siteId: siteId,
+    ...pageInfo
+  }).then(res => {
+    if (res.code === 1000) {
+      total.value = res.data.total
+      tunnelList.value = res.data.rows
+      showFirst.value = (total.value / pageInfo.pageSize) > 1;
+      showAddIcon.value = (total.value / pageInfo.pageSize) == 1;
+      // siteName.value = res.data.siteName
+    } else {
+      ElMessage.warning(res.msg)
+    }
+    loading.close()
+  })
+}
+getList()
+const firstPage = () => {
+  pageInfo.pageNum = 1
+  getList()
+}
+const lastPage = () => {
+  pageInfo.pageNum = total.value / pageInfo.pageSize
+  getList()
+}
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val
+  getList()
+}
+const handleSubmit = debounce((instance) => {
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    const data = {
+      siteId: siteId,
+      ...form.value,
+      tunnelGatewayDtoList: serialNumberList.value
+    }
+    addTunnel(data).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success('新增成功')
+        getList()
+        isVisited.value = false
+      } else {
+        ElMessage.warning(res.msg)
+      }
+    })
+  })
+}, 100)
+//预览隧道
+const handlePreview = (id) => {
+  if (id) {
+    getTunnelBySiteId(siteId).then((res) => {
+      if (res?.code === 1000) {
+        if (res.data.filter((item) => item.value == id).length === 0) {
+          ElMessage.warning('当前预览的隧道未准备好, 不予展示, 请添加设备后再试!')
+        } else {
+          router.push('/' + id + '/' + siteId)
+        }
+      }
+    });
+  }
+}
+const handleGoToEditTunnel = (tunnelId) => {
+  isEdit.value = true
+  if (type === 'bySite') {
+    router.push('/edit/' + tunnelId + '/bySite/' + userId)
+  } else if (type === 'byHome') {
+    router.push('/edit/' + tunnelId + '/byHome/' + userId)
+  }
+}
+const handleChooseAll = debounce(() => {
+  tunnelList.value.map(item => {
+    item.checked = !item.checked
+    if (item.checked && !item.isDefault) {
+      tunnelIds.value.push(item.tunnelId)
+    } else if (!item.checked && !item.isDefault) {
+      tunnelIds.value.map((newItem, index) => {
+        if (newItem === item.tunnelId) {
+          tunnelIds.value.splice(index, 1)
+        }
+      })
+    }
+  })
+}, 100)
+const handleEditDevice = (tunnelId) => {
+  if (type === 'bySite') {
+    router.push('/device/' + tunnelId + '/bySite/' + userId)
+  } else if (type === 'byHome') {
+    router.push('/device/' + tunnelId + '/byHome/' + userId)
+  }
+}
+const restFrom = () => {
+  form.value = {
+    tunnelName: '',
+    tunnelAlias: '',
+    serialNumber: '',
+    totalLength: '',
+    referenceFrequency: '',
+    upTime: 0,
+    upFrequency: '',
+    dropTime: 0,
+    dropFrequency: '',
+    remarks: '',
+    isDefault: false
+  }
+}
+const handleAdd = () => {
+  restFrom()
+  title.value = '新增隧道'
+  isVisited.value = true
+  serialNumberList.value = [
+    {
+      serialNumber: '',
+      serialNumberType:''
+    }]
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
+}
+const getImageUrl = (name) => {
+  return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
+}
+const handleClickSite = (type) => {
+  if (type.checked) {
+    tunnelIds.value.push(type.tunnelId)
+    tunnelNameList.value.push(type.tunnelName)
+  } else {
+    tunnelIds.value.map((item, index) => {
+      if (item === type.tunnelId) {
+        tunnelIds.value.splice(index, 1)
+      }
+    })
+    tunnelNameList.value.map((item, index) => {
+      if (item === type.tunnelName) {
+        tunnelNameList.value.splice(index, 1)
+      }
+    })
+  }
+}
+const handleMoreDelete = debounce(() => {
+  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)
+        }
+      })
+    })
+  }
+}, 100)
+
+</script>
+
+<style scoped lang="scss">
+.serialNumber-name-overflow-hidden{
+
+}
+.showNull {
+  margin-top: 150px;
+  font-size: 60px;
+  color: #05FEFF;
+}
+
+:deep(.el-form-item__error) {
+  font-size: 35px;
+}
+
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.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;
+}
+
+.model-change {
+  z-index: 55;
+  position: absolute;
+  left: 700px;
+  font-size: 46px;
+  color: #05FEFF;
+  display: flex;
+  //flex-direction: column;
+  .model {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:last-child {
+      margin-left: 30px
+    }
+
+    > span:hover {
+      text-decoration: underline;
+    }
+  }
+
+
+  .card-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_tzdh.png');
+    margin-right: 16px;
+  }
+
+  .img-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_dtdh.png');
+    margin-right: 16px;
+  }
+}
+
+: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;
+  border-radius: 20px;
+  padding: 30px 40px;
+  box-sizing: border-box;
+  //margin: 458px auto 0 auto;
+
+  .el-dialog__header {
+    padding: 0;
+    display: none;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-top: 40px;
+}
+
+:deep(.el-form-item__label) {
+  font-size: 38px;
+  font-family: MicrosoftYaHei;
+  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;
+    }
+
+    .el-input__suffix-inner {
+      font-size: 30px;
+      color: #08B7B8;
+      line-height: 40px;
+      font-weight: bold;
+    }
+  }
+}
+
+.siteId {
+  display: flex;
+  justify-content: center;
+  margin: 0 0 60px 0;
+  font-size: 50px;
+  color: #FFFFFF;
+}
+
+.tunnel-bgc {
+  background-color: #072348;
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/tunnel/sd_bj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: space-between;
+
+    .back-tunnel {
+      cursor: pointer;
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 38px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 23px;
+        width: 33px;
+        height: 33px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+
+    .all-del-btn {
+      display: flex;
+
+      .del-btn {
+        width: 168px;
+        height: 60px;
+        background: #08B7B8;
+        border-radius: 11px;
+      }
+
+      .all-btn {
+        cursor: pointer;
+        padding-left: 53px;
+        width: 178px;
+        height: 70px;
+        line-height: 70px;
+        border-radius: 11px;
+        border: 2px solid #08B7B8;
+        color: #FFFFFF;
+        font-size: 38px;
+
+        &:last-child {
+          margin-left: 40px;
+          margin-right: 70px;
+        }
+      }
+    }
+  }
+
+  .img-box {
+    margin: 100px;
+  }
+
+  .box-content::after {
+    content: '';
+    flex: auto; /* 或者flex: 1 */
+  }
+
+  .box-content {
+    height: 1850px;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 67px;
+    padding-right: 70px;
+    justify-content: space-between;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .add-box {
+      cursor: pointer;
+      font-weight: bold;
+      color: #60DDDE;
+      font-size: 38px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .add-icon {
+        margin-top: 110px;
+        margin-bottom: 87px;
+        width: 220px;
+        height: 220px;
+        background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
+      }
+    }
+
+    .site-box {
+      //cursor: pointer;
+      margin-top: 50px;
+      margin-right: 1.5%;
+      padding: 40px 30px;
+      width: 925px;
+      height: 550px;
+      background-image: url('@/assets/images/tunnel/zdgl_bj.png');
+      //box-sizing: border-box;
+      position: relative;
+
+      //&:hover {
+      //  background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
+      //}
+
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        font-size: 45px;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 50px;
+
+        > span {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        > span:nth-child(2) {
+          font-size: 38px;
+          color: #5CE4F2;
+        }
+
+
+        > span:last-child {
+          margin-left: 5px;
+          width: 95px;
+          padding: 1px 8px;
+          font-size: 32px;
+          border: 2px solid #05FEFF;
+          border-radius: 10px;
+          position: relative;
+        }
+      }
+
+      .box-center {
+        display: flex;
+
+        //flex-direction: column;
+        > div:first-child {
+
+          > div:nth-child(2) {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-right: 30px;
+          }
+        }
+
+        .left-img {
+          cursor: pointer;
+          margin-top: 110px;
+          margin-right: 50px;
+          width: 340px;
+          height: 148px;
+          background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
+        }
+
+        .edit-btn {
+          cursor: pointer;
+          margin-top: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          font-size: 30px;
+          color: #60DDDE;
+          //margin-left: 175px;
+
+          .edit-icon {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/site/zdgl_icon_bj.png');
+            margin-right: 10px;
+          }
+
+          .edit-icon-two {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/tunnel/device.png');
+            margin-right: 10px;
+          }
+        }
+
+        .tunnel-right {
+          padding-top: 40px;
+
+          > div:first-child {
+            display: flex;
+            align-items: center;
+            font-size: 36px;
+            color: #FB3838;
+
+            .fan-icon {
+              margin-right: 10px;
+              width: 32px;
+              height: 32px;
+              background-image: url('@/assets/images/tunnel/sp_icon_yc.png');
+            }
+          }
+
+          .icons-block {
+            margin-top: 50px;
+            display: flex;
+            flex-wrap: wrap;
+
+            .icon-text {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              color: #FFFFFF;
+              font-size: 34px;
+              margin-right: 17px;
+              margin-bottom: 30px;
+
+              &:first-child {
+                margin-right: 37px;
+              }
+
+              &:nth-child(2n) {
+                margin-right: 0;
+              }
+
+              .icon {
+                width: 32px;
+                height: 32px;
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    bottom: 50px;
+    color: #60DDDE;
+    font-size: 38px;
+    font-weight: bold;
+
+    :deep(.el-pagination.is-background ) {
+      .btn-next, .btn-prev {
+        background-color: transparent;
+      }
+
+      .el-pager {
+        li {
+          margin: 0 0 0 40px;
+        }
+
+        li.is-active {
+          background-color: #60DDDE;
+        }
+      }
+    }
+
+    > span:first-child {
+      margin-right: 60px;
+    }
+
+    > span:last-child {
+      margin-left: 71px;
+    }
+
+    :deep(.btn-prev) {
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-right: 20px;
+
+    }
+
+    :deep(.btn-next) {
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-left: 30px;
+    }
+
+    :deep(.el-pager li.is-active ) {
+      width: 70px;
+      height: 70px;
+      background: #60DDDE;
+      border-radius: 50%;
+      color: #071F40;
+      font-size: 38px;
+      font-weight: bold;
+    }
+
+    :deep(.el-pager li) {
+      margin-left: 40px;
+    }
+
+    :deep(.el-pager li:not(.is-active) ) {
+      width: 70px;
+      height: 70px;
+      border: 1px solid #60DDDE;
+      border-radius: 50%;
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+    }
+  }
+
+}
+</style>
diff --git a/src/views/tunnel-manage/index-or.vue b/src/views/tunnel-manage/index-or.vue
new file mode 100644
index 0000000..546da3f
--- /dev/null
+++ b/src/views/tunnel-manage/index-or.vue
@@ -0,0 +1,1060 @@
+<template>
+  <div class="tunnel-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="handleGoSiteOrIndex">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <div class="site-name">
+        {{ siteName }}
+      </div>
+      <!--      <div class="model-change">-->
+      <!--        <div class="model" @click="clickModel=1;showNull=false">-->
+      <!--          <div class="card-bg"></div>-->
+      <!--          <span>卡片模式</span>-->
+      <!--        </div>-->
+      <!--        <div class="model" @click="clickModel=2;getSiteImg()">-->
+      <!--          <div class="img-bg"></div>-->
+      <!--          <span>图纸导航</span>-->
+      <!--        </div>-->
+      <!--      </div>-->
+      <tunnel-title/>
+      <div class="all-del-btn" v-if="showOperation">
+        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
+          添加
+        </div>
+        <div class="all-btn" @click="handleChooseAll">
+          全选
+        </div>
+        <div class="all-btn del-btn" @click="handleMoreDelete">
+          删除
+        </div>
+      </div>
+    </div>
+    <div class="box-content" v-if="clickModel===1">
+      <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>
+          <el-checkbox v-if="!item.isDefault" v-model="item.checked" size="large" @change="handleClickSite(item)"/>
+          <span v-else>默认</span>
+        </div>
+        <div class="box-center">
+          <div>
+            <div class="left-img" @click="handlePreview(item.tunnelId)"></div>
+            <div>
+              <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.tunnelId)">
+                <div class="edit-icon"></div>
+                <div>隧道编辑</div>
+              </div>
+              <div class="edit-btn" @click.stop="handleEditDevice(item.tunnelId)">
+                <div class="edit-icon-two"></div>
+                <div>设备管理</div>
+              </div>
+            </div>
+          </div>
+          <div class="tunnel-right">
+            <div>
+              <!--              <div class="fan-icon"></div>-->
+              <!--              <span>风机异常</span>-->
+            </div>
+            <div class="icons-block">
+              <div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
+                <div :style="{ backgroundImage: 'url(' +getImageUrl(equItem.icon)+')' }" class="icon"></div>
+                <span>{{ equItem.name }}：{{ item.tunnelEquipmentAmountInfo[equItem.type] }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="site-box add-box" @click="handleAdd" v-if="showOperation">
+        <div class="add-icon"></div>
+        <div style="cursor: pointer">添加隧道</div>
+      </div>
+    </div>
+    <div v-else>
+      <div v-if="showNull" class="showNull">
+        暂无图纸~ 请前往站点管理上传图纸~
+      </div>
+      <div class="img-box" v-else>
+        <!--        @/assets/images/tunnel/img.png-->
+        <!--        <img :src="'data:image/png;base64,'+siteImage" style="width:3500px;height:1789px" id="imgModel" usemap="#image"-->
+        <!--             alt="" @click="clickHandler">-->
+        <map name="image" id="image">
+          <area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
+                :title="item.tunnelId+'隧道'" :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId)">
+        </map>
+      </div>
+    </div>
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
+      <div class="siteId">
+        <span>{{ title }}</span>
+      </div>
+      <el-form :model="form" :label-position="right" label-width="230px" :rules="formRules" ref="formInstance">
+        <el-form-item label="隧道名称" prop="tunnelName">
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
+        </el-form-item>
+        <el-form-item label="隧道简称" prop="tunnelAlias">
+          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
+        </el-form-item>
+        <el-form-item label="序列号前缀" prop="serialNumberPrefix">
+          <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
+        </el-form-item>
+        <el-form-item label="序列号1" prop="serialNumber">
+          <el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>
+        </el-form-item>
+<!--        <el-form-item label="序列号2" prop="serialNumberOne">-->
+<!--          <el-input v-model="form.serialNumberOne" placeholder="请输入序列号2"/>-->
+<!--        </el-form-item>-->
+
+
+        <!--        <el-form-item label="PLC序列号" prop="serialNumber">-->
+        <!--          <el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>-->
+        <!--        </el-form-item>-->
+        <!--        <div style="display: flex;flex-direction: column">-->
+        <!--          <div v-for="(item,index) in serialNumberList" :key="index" >-->
+        <!--            <el-form-item :label="'序列号'+(index+2)">-->
+        <!--              <div style="flex: 1;display: flex;">-->
+        <!--                <el-input v-model="item.serialNumberOne" :placeholder="'请输入序列号'+(index+2)" />-->
+        <!--                <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="addSerialNumber" v-if="index===0">-->
+        <!--                  <CirclePlus/>-->
+        <!--                </el-icon>-->
+        <!--                <el-icon v-else size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="delSerialNumber(index)" >-->
+        <!--                  <Remove/>-->
+        <!--                </el-icon>-->
+        <!--              </div>-->
+        <!--            </el-form-item>-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <el-form-item label="隧道长度" prop="totalLength">
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
+        </el-form-item>
+        <el-form-item label="施工长度" prop="constructionLength">
+          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
+        </el-form-item>
+        <el-form-item label="基准频率" prop="referenceFrequency">
+          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label="升频时间(分钟)" prop="upTime" label-width="300px">
+            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="升频率" prop="upFrequency">
+            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label="降频时间(分钟)" prop="dropTime" label-width="300px">
+            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="降频率" prop="dropFrequency">
+            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <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 class="btns">
+        <div class="cancel-btn" @click="isVisited=false">
+          取消
+        </div>
+        <div class="sure-btn" @click="handleSubmit(formInstance)">
+          确定
+        </div>
+      </div>
+    </el-dialog>
+    <div class="pagination">
+      <span @click="firstPage" v-if="showFirst">首页</span>
+      <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
+                     :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
+                     @current-change="handleCurrentChange" :hide-on-single-page="true"/>
+      <span @click="lastPage" v-if="showFirst">尾页</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
+import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
+import {getSiteDrawing, getSiteDetail} from "@/api/site";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {getTunnelBySiteId} from "@/api/largeScreen";
+import {debounce} from 'lodash'
+
+const serialNumberList = ref([
+  {
+    serialNumberOne: ''
+  }
+])
+
+const validateNumber = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
+const validateSerialNumberPrefix = (rule, value) => {
+  return value.length > 13 && value.slice(0, -2) == form.value.serialNumberPrefix;
+}
+const router = useRouter()
+const siteImage = ref()
+const showAddIcon = ref(true)
+const params = router.currentRoute.value.params;
+const siteId = reactive(params.siteId)
+const userId = reactive(params.userId)
+const type = reactive(params.type)
+const formRules = ref({
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
+  tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
+  serialNumberPrefix: [
+    {required: true, message: '请输入序列号前缀', trigger: ['blur', 'change']},
+    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的序列号前缀', trigger: ['blur', 'change']},
+    {min: 14, max: 14, message: '隧道序列号前缀长度为14位', trigger: ['blur', 'change']},
+  ],
+  serialNumber: [
+    {required: true, message: '请输入序列号1', trigger: ['blur', 'change']},
+    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的序列号1', trigger: ['blur', 'change']},
+    {min: 16, max: 16, message: '隧道序列号1长度为16位', trigger: ['blur', 'change']},
+    // {validator: validateSerialNumberPrefix, message: '同一隧道的序列号前缀需相同', trigger: ['blur', 'change']}
+  ],
+  serialNumberOne: [
+    // {required: true, message: '请输入序列号2', trigger: ['blur', 'change']},
+    // {validator: validateNumber, message: '请输入英文、数字、英文数字组合的序列号2', trigger: ['blur', 'change']},
+    // { min:16,max:16,message: '隧道序列号2长度为16位',trigger: ['blur', 'change']},
+    // {validator: validateSerialNumberOnePrefix, message: '同一隧道的序列号前缀需相同', trigger: ['blur', 'change']}
+  ],
+  totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
+  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
+  referenceFrequency: [{required: true, message: '请输入基准频率', trigger: ['blur', 'change']}],
+  upTime: [{required: true, message: '请选择升频时间', trigger: ['blur', 'change']}],
+  upFrequency: [{required: true, message: '请输入升频率', trigger: ['blur', 'change']}],
+  dropTime: [{required: true, message: '请选择降频时间', trigger: ['blur', 'change']}],
+  dropFrequency: [{required: true, message: '请输入降频率', trigger: ['blur', 'change']}]
+})
+let clickModel = ref(1)
+const showFirst = ref(true)
+const showOperation = ref(true)
+const formInstance = ref()
+const tunnelList = ref([])
+const coordsList = ref([
+  {
+    tunnelId: 1,
+    coords: '767,1117,793,1182,2379,682,2437,454,2349,505,2298,666,2221,531,2153,578,2212,692,765,1126',
+  }, {
+    tunnelId: 1,
+    coords: '863,1475,1135,1494,2321,1078,3023,801,3214,703,3288,752,2300,1154,1560,1438,1170,1554,844,1529',
+  }, {
+    tunnelId: 94,
+    coords: '1181,1364,2105,622,2005,589,1116,1324'
+  }
+])
+const iconsList = ref([
+  {
+    icon: 'sd_icon_fj.png',
+    name: '风机',
+    type: 'frequency',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_sd.png',
+    name: '湿度',
+    type: 'humidness',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fy.png',
+    name: '风压',
+    type: 'windPressure',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_yq.png',
+    name: '氧气',
+    type: 'oxygen',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fs.png',
+    name: '风速',
+    type: 'windSpeed',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fc.png',
+    name: '粉尘',
+    type: 'dust',
+    num: 1
+  },
+  {
+    icon: 'sd_icon_wd.png',
+    name: '温度',
+    type: 'temperature',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_qt.png',
+    name: '有害气体',
+    type: 'harmfulGas',
+    num: 0
+  },
+])
+const title = ref('新增隧道')
+const showNull = ref(false);
+const isVisited = ref(false);
+const tunnelIds = ref([])
+const tunnelNameList = ref([])
+const siteName = ref(localStorage.getItem('site'))
+const form = ref({
+  tunnelName: '',
+  tunnelAlias: '',
+  serialNumberPrefix: '',
+  serialNumberOne: '',
+  serialNumber: '',
+  totalLength: '',
+  referenceFrequency: '',
+  upTime: '',
+  upFrequency: '',
+  dropTime: '',
+  dropFrequency: '',
+  remarks: '',
+  isDefault: false
+});
+const isEdit = ref(false)
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 12
+});
+const total = ref(10);
+onMounted(() => {
+  showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
+})
+const addSerialNumber = () => {
+  serialNumberList.value.push({
+    serialNumberOne: ''
+  })
+}
+const delSerialNumber = (index) => {
+  serialNumberList.value.splice(index, 1)
+}
+const getSiteImg = () => {
+  showNull.value = false
+  getSiteDrawing(siteId).then((res) => {
+    if (res.code === 1000) {
+      if (res.data.drawingData === null) {
+        // ElMessageBox.confirm('暂无图纸, 是否前往站点管理上传图纸?', '系统提示', {
+        //   confirmButtonText: '确定',
+        //   cancelButtonText: '取消',
+        //   type: 'warning'
+        // }).then(() => {
+        //   router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
+        // }).catch(()=>{
+        showNull.value = true
+        // })
+      } else {
+        showNull.value = false
+        siteImage.value = res.data.drawingData
+      }
+    }
+  });
+}
+const clickHot = (id) => {
+  console.log('点击热区===============')
+  router.push('/' + id + '/' + siteId)
+}
+// const testArr=[]
+const clickHandler = (id) => {
+  // let obj=e.offsetX+','+e.offsetY
+  // testArr.push(obj)
+  // console.log('正确数值',testArr.map(item=>item).join())
+  // console.log('点击',e.offsetX+','+e.offsetY+',')
+  // console.log('图纸', document.getElementById('imgModel').getBoundingClientRect().x,document.getElementById('imgModel').getBoundingClientRect().y)
+}
+const handleGoSiteOrIndex = () => {
+  if (type === 'bySite') {
+    router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
+  } else if (type === 'byHome') {
+    router.push('/' + 'siteToHome/' + siteId)
+  }
+}
+//根据站点id获取隧道信息
+const getTunnel = (id) => {
+  getSiteDetail(id).then((res) => {
+    if (res?.code === 1000) {
+      siteName.value = res.data.siteName
+    }
+  });
+}
+getTunnel(siteId)
+const getList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  getTunnelList({
+    siteId: siteId,
+    ...pageInfo
+  }).then(res => {
+    if (res.code === 1000) {
+      total.value = res.data.total
+      tunnelList.value = res.data.rows
+      showFirst.value = total.value / pageInfo.pageSize >= 1;
+      // siteName.value = res.data.siteName
+    } else {
+      ElMessage.warning(res.msg)
+    }
+    loading.close()
+  })
+}
+getList()
+const firstPage = () => {
+  pageInfo.pageNum = 1
+  getList()
+}
+const lastPage = () => {
+  pageInfo.pageNum = total.value / pageInfo.pageSize
+  getList()
+}
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val
+  getList()
+}
+const handleSubmit = debounce((instance) => {
+  let serialNumberListParam = serialNumberList.value.map(item => item.serialNumberOne)
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    const data = {
+      siteId: siteId,
+      ...form.value,
+      serialNumberList: serialNumberListParam
+    }
+    addTunnel(data).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success('新增成功')
+        getList()
+        isVisited.value = false
+      } else {
+        ElMessage.warning(res.msg)
+      }
+    })
+  })
+}, 100)
+//预览隧道
+const handlePreview = (id) => {
+  console.log('预览')
+  if (id) {
+    getTunnelBySiteId(siteId).then((res) => {
+      if (res?.code === 1000) {
+        if (res.data.filter((item) => item.value == id).length === 0) {
+          ElMessage.warning('当前预览的隧道未准备好, 不予展示, 请添加设备后再试!')
+        } else {
+          router.push('/' + id + '/' + siteId)
+        }
+      }
+    });
+  }
+}
+const handleGoToEditTunnel = (tunnelId) => {
+  isEdit.value = true
+  if (type === 'bySite') {
+    router.push('/edit/' + tunnelId + '/bySite/' + userId)
+  } else if (type === 'byHome') {
+    router.push('/edit/' + tunnelId + '/byHome/' + userId)
+  }
+}
+const handleChooseAll = debounce(() => {
+  tunnelList.value.map(item => {
+    item.checked = !item.checked
+    if (item.checked && !item.isDefault) {
+      tunnelIds.value.push(item.tunnelId)
+    } else if (!item.checked && !item.isDefault) {
+      tunnelIds.value.map((newItem, index) => {
+        if (newItem === item.tunnelId) {
+          tunnelIds.value.splice(index, 1)
+        }
+      })
+    }
+  })
+}, 100)
+const handleEditDevice = (tunnelId) => {
+  if (type === 'bySite') {
+    router.push('/device/' + tunnelId + '/bySite/' + userId)
+  } else if (type === 'byHome') {
+    router.push('/device/' + tunnelId + '/byHome/' + userId)
+  }
+}
+const restFrom = () => {
+  form.value = {
+    tunnelName: '',
+    tunnelAlias: '',
+    serialNumber: '',
+    totalLength: '',
+    referenceFrequency: '',
+    upTime: '',
+    upFrequency: '',
+    dropTime: '',
+    dropFrequency: '',
+    remarks: '',
+    isDefault: false
+  }
+}
+const handleAdd = () => {
+  restFrom()
+  title.value = '新增隧道'
+  isVisited.value = true
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
+}
+const getImageUrl = (name) => {
+  return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
+}
+const handleClickSite = (type) => {
+  if (type.checked) {
+    tunnelIds.value.push(type.tunnelId)
+    tunnelNameList.value.push(type.tunnelName)
+  } else {
+    tunnelIds.value.map((item, index) => {
+      if (item === type.tunnelId) {
+        tunnelIds.value.splice(index, 1)
+      }
+    })
+    tunnelNameList.value.map((item, index) => {
+      if (item === type.tunnelName) {
+        tunnelNameList.value.splice(index, 1)
+      }
+    })
+  }
+}
+const handleMoreDelete = debounce(() => {
+  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)
+        }
+      })
+    })
+  }
+}, 100)
+
+</script>
+
+<style scoped lang="scss">
+.showNull {
+  margin-top: 150px;
+  font-size: 60px;
+  color: #05FEFF;
+}
+
+:deep(.el-form-item__error) {
+  font-size: 35px;
+}
+
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.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;
+}
+
+.model-change {
+  z-index: 55;
+  position: absolute;
+  left: 700px;
+  font-size: 46px;
+  color: #05FEFF;
+  display: flex;
+  //flex-direction: column;
+  .model {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:last-child {
+      margin-left: 30px
+    }
+
+    > span:hover {
+      text-decoration: underline;
+    }
+  }
+
+
+  .card-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_tzdh.png');
+    margin-right: 16px;
+  }
+
+  .img-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_dtdh.png');
+    margin-right: 16px;
+  }
+}
+
+: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;
+  border-radius: 20px;
+  padding: 30px 40px;
+  box-sizing: border-box;
+  //margin: 458px auto 0 auto;
+
+  .el-dialog__header {
+    padding: 0;
+    display: none;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-top: 40px;
+}
+
+:deep(.el-form-item__label) {
+  font-size: 38px;
+  font-family: MicrosoftYaHei;
+  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;
+    }
+
+    .el-input__suffix-inner {
+      font-size: 30px;
+      color: #08B7B8;
+      line-height: 40px;
+      font-weight: bold;
+    }
+  }
+}
+
+.siteId {
+  display: flex;
+  justify-content: center;
+  margin: 0 0 60px 0;
+  font-size: 50px;
+  color: #FFFFFF;
+}
+
+.tunnel-bgc {
+  background-color: #072348;
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/tunnel/sd_bj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: space-between;
+
+    .back-tunnel {
+      cursor: pointer;
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 38px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 23px;
+        width: 33px;
+        height: 33px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+
+    .all-del-btn {
+      display: flex;
+
+      .del-btn {
+        width: 168px;
+        height: 60px;
+        background: #08B7B8;
+        border-radius: 11px;
+      }
+
+      .all-btn {
+        cursor: pointer;
+        padding-left: 53px;
+        width: 178px;
+        height: 70px;
+        line-height: 70px;
+        border-radius: 11px;
+        border: 2px solid #08B7B8;
+        color: #FFFFFF;
+        font-size: 38px;
+
+        &:last-child {
+          margin-left: 40px;
+          margin-right: 70px;
+        }
+      }
+    }
+  }
+
+  .img-box {
+    margin: 100px;
+  }
+
+  .box-content {
+    height: 1850px;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 67px;
+    padding-right: 70px;
+    //justify-content: space-between;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .add-box {
+      cursor: pointer;
+      font-weight: bold;
+      color: #60DDDE;
+      font-size: 38px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .add-icon {
+        margin-top: 110px;
+        margin-bottom: 87px;
+        width: 220px;
+        height: 220px;
+        background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
+      }
+    }
+
+    .site-box {
+      //cursor: pointer;
+      margin-top: 50px;
+      margin-right: 1.5%;
+      padding: 40px 30px;
+      width: 925px;
+      height: 550px;
+      background-image: url('@/assets/images/tunnel/zdgl_bj.png');
+      //box-sizing: border-box;
+      position: relative;
+
+      //&:hover {
+      //  background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
+      //}
+
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        font-size: 45px;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 50px;
+
+        > span {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        > span:nth-child(2) {
+          font-size: 38px;
+          color: #5CE4F2;
+        }
+
+
+        > span:last-child {
+          margin-left: 5px;
+          width: 95px;
+          padding: 1px 8px;
+          font-size: 32px;
+          border: 2px solid #05FEFF;
+          border-radius: 10px;
+          position: relative;
+        }
+      }
+
+      .box-center {
+        display: flex;
+
+        //flex-direction: column;
+        > div:first-child {
+
+          > div:nth-child(2) {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-right: 30px;
+          }
+        }
+
+        .left-img {
+          cursor: pointer;
+          margin-top: 110px;
+          margin-right: 50px;
+          width: 340px;
+          height: 148px;
+          background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
+        }
+
+        .edit-btn {
+          cursor: pointer;
+          margin-top: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          font-size: 30px;
+          color: #60DDDE;
+          //margin-left: 175px;
+
+          .edit-icon {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/site/zdgl_icon_bj.png');
+            margin-right: 10px;
+          }
+
+          .edit-icon-two {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/tunnel/device.png');
+            margin-right: 10px;
+          }
+        }
+
+        .tunnel-right {
+          padding-top: 40px;
+
+          > div:first-child {
+            display: flex;
+            align-items: center;
+            font-size: 36px;
+            color: #FB3838;
+
+            .fan-icon {
+              margin-right: 10px;
+              width: 32px;
+              height: 32px;
+              background-image: url('@/assets/images/tunnel/sp_icon_yc.png');
+            }
+          }
+
+          .icons-block {
+            margin-top: 50px;
+            display: flex;
+            flex-wrap: wrap;
+
+            .icon-text {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              color: #FFFFFF;
+              font-size: 34px;
+              margin-right: 17px;
+              margin-bottom: 30px;
+
+              &:first-child {
+                margin-right: 37px;
+              }
+
+              &:nth-child(2n) {
+                margin-right: 0;
+              }
+
+              .icon {
+                width: 32px;
+                height: 32px;
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    bottom: 50px;
+    color: #60DDDE;
+    font-size: 38px;
+    font-weight: bold;
+
+    :deep(.el-pagination.is-background ) {
+      .btn-next, .btn-prev {
+        background-color: transparent;
+      }
+
+      .el-pager {
+        li {
+          margin: 0 0 0 40px;
+        }
+
+        li.is-active {
+          background-color: #60DDDE;
+        }
+      }
+    }
+
+    > span:first-child {
+      margin-right: 60px;
+    }
+
+    > span:last-child {
+      margin-left: 71px;
+    }
+
+    :deep(.btn-prev) {
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-right: 20px;
+
+    }
+
+    :deep(.btn-next) {
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-left: 30px;
+    }
+
+    :deep(.el-pager li.is-active ) {
+      width: 70px;
+      height: 70px;
+      background: #60DDDE;
+      border-radius: 50%;
+      color: #071F40;
+      font-size: 38px;
+      font-weight: bold;
+    }
+
+    :deep(.el-pager li) {
+      margin-left: 40px;
+    }
+
+    :deep(.el-pager li:not(.is-active) ) {
+      width: 70px;
+      height: 70px;
+      border: 1px solid #60DDDE;
+      border-radius: 50%;
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+    }
+  }
+
+}
+</style>
diff --git a/src/views/tunnel-manage/index-origanl.vue b/src/views/tunnel-manage/index-origanl.vue
new file mode 100644
index 0000000..8a122fb
--- /dev/null
+++ b/src/views/tunnel-manage/index-origanl.vue
@@ -0,0 +1,1060 @@
+<template>
+  <div class="tunnel-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="handleGoSiteOrIndex">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <div class="site-name">
+        {{ siteName }}
+      </div>
+      <!--      <div class="model-change">-->
+      <!--        <div class="model" @click="clickModel=1;showNull=false">-->
+      <!--          <div class="card-bg"></div>-->
+      <!--          <span>卡片模式</span>-->
+      <!--        </div>-->
+      <!--        <div class="model" @click="clickModel=2;getSiteImg()">-->
+      <!--          <div class="img-bg"></div>-->
+      <!--          <span>图纸导航</span>-->
+      <!--        </div>-->
+      <!--      </div>-->
+      <tunnel-title/>
+      <div class="all-del-btn" v-if="showOperation">
+        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
+          添加
+        </div>
+        <div class="all-btn" @click="handleChooseAll">
+          全选
+        </div>
+        <div class="all-btn del-btn" @click="handleMoreDelete">
+          删除
+        </div>
+      </div>
+    </div>
+    <div class="box-content" v-if="clickModel===1">
+      <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>
+          <el-checkbox v-if="!item.isDefault" v-model="item.checked" size="large" @change="handleClickSite(item)"/>
+          <span v-else>默认</span>
+        </div>
+        <div class="box-center">
+          <div>
+            <div class="left-img" @click="handlePreview(item.tunnelId)"></div>
+            <div>
+              <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.tunnelId)">
+                <div class="edit-icon"></div>
+                <div>隧道编辑</div>
+              </div>
+              <div class="edit-btn" @click.stop="handleEditDevice(item.tunnelId)">
+                <div class="edit-icon-two"></div>
+                <div>设备管理</div>
+              </div>
+            </div>
+          </div>
+          <div class="tunnel-right">
+            <div>
+              <!--              <div class="fan-icon"></div>-->
+              <!--              <span>风机异常</span>-->
+            </div>
+            <div class="icons-block">
+              <div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
+                <div :style="{ backgroundImage: 'url(' +getImageUrl(equItem.icon)+')' }" class="icon"></div>
+                <span>{{ equItem.name }}：{{ item.tunnelEquipmentAmountInfo[equItem.type] }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="site-box add-box" @click="handleAdd" v-if="showOperation">
+        <div class="add-icon"></div>
+        <div style="cursor: pointer">添加隧道</div>
+      </div>
+    </div>
+    <div v-else>
+      <div v-if="showNull" class="showNull">
+        暂无图纸~ 请前往站点管理上传图纸~
+      </div>
+      <div class="img-box" v-else>
+        <!--        @/assets/images/tunnel/img.png-->
+        <!--        <img :src="'data:image/png;base64,'+siteImage" style="width:3500px;height:1789px" id="imgModel" usemap="#image"-->
+        <!--             alt="" @click="clickHandler">-->
+        <map name="image" id="image">
+          <area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
+                :title="item.tunnelId+'隧道'" :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId)">
+        </map>
+      </div>
+    </div>
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
+      <div class="siteId">
+        <span>{{ title }}</span>
+      </div>
+      <el-form :model="form" :label-position="right" label-width="230px" :rules="formRules" ref="formInstance">
+        <el-form-item label="隧道名称" prop="tunnelName">
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
+        </el-form-item>
+        <el-form-item label="隧道简称" prop="tunnelAlias">
+          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
+        </el-form-item>
+        <el-form-item label="序列号前缀" prop="serialNumberPrefix">
+          <el-input v-model="form.serialNumberPrefix" placeholder="请输入序列号前缀"/>
+        </el-form-item>
+        <el-form-item label="序列号1" prop="serialNumber">
+          <el-input v-model="form.serialNumber" placeholder="请输入序列号1"/>
+        </el-form-item>
+        <el-form-item label="序列号2" prop="serialNumberOne">
+          <el-input v-model="form.serialNumberOne" placeholder="请输入序列号2"/>
+        </el-form-item>
+
+
+        <!--        <el-form-item label="PLC序列号" prop="serialNumber">-->
+        <!--          <el-input v-model="form.serialNumber" placeholder="请输入PLC序列号"/>-->
+        <!--        </el-form-item>-->
+        <!--        <div style="display: flex;flex-direction: column">-->
+        <!--          <div v-for="(item,index) in serialNumberList" :key="index" >-->
+        <!--            <el-form-item :label="'序列号'+(index+2)">-->
+        <!--              <div style="flex: 1;display: flex;">-->
+        <!--                <el-input v-model="item.serialNumberOne" :placeholder="'请输入序列号'+(index+2)" />-->
+        <!--                <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="addSerialNumber" v-if="index===0">-->
+        <!--                  <CirclePlus/>-->
+        <!--                </el-icon>-->
+        <!--                <el-icon v-else size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer" @click="delSerialNumber(index)" >-->
+        <!--                  <Remove/>-->
+        <!--                </el-icon>-->
+        <!--              </div>-->
+        <!--            </el-form-item>-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <el-form-item label="隧道长度" prop="totalLength">
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
+        </el-form-item>
+        <el-form-item label="施工长度" prop="constructionLength">
+          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
+        </el-form-item>
+        <el-form-item label="基准频率" prop="referenceFrequency">
+          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label="升频时间(分钟)" prop="upTime" label-width="300px">
+            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="升频率" prop="upFrequency">
+            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label="降频时间(分钟)" prop="dropTime" label-width="300px">
+            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="降频率" prop="dropFrequency">
+            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <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 class="btns">
+        <div class="cancel-btn" @click="isVisited=false">
+          取消
+        </div>
+        <div class="sure-btn" @click="handleSubmit(formInstance)">
+          确定
+        </div>
+      </div>
+    </el-dialog>
+    <div class="pagination">
+      <span @click="firstPage" v-if="showFirst">首页</span>
+      <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
+                     :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
+                     @current-change="handleCurrentChange" :hide-on-single-page="true"/>
+      <span @click="lastPage" v-if="showFirst">尾页</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
+import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
+import {getSiteDrawing, getSiteDetail} from "@/api/site";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {getTunnelBySiteId} from "@/api/largeScreen";
+import {debounce} from 'lodash'
+
+const serialNumberList = ref([
+  {
+    serialNumberOne: ''
+  }
+])
+
+const validateNumber = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
+const validateSerialNumberPrefix = (rule, value) => {
+  return value.length > 13 && value.slice(0, -2) == form.value.serialNumberPrefix;
+}
+const router = useRouter()
+const siteImage = ref()
+const showAddIcon = ref(true)
+const params = router.currentRoute.value.params;
+const siteId = reactive(params.siteId)
+const userId = reactive(params.userId)
+const type = reactive(params.type)
+const formRules = ref({
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
+  tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
+  serialNumberPrefix: [
+    {required: true, message: '请输入序列号前缀', trigger: ['blur', 'change']},
+    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的序列号前缀', trigger: ['blur', 'change']},
+    {min: 14, max: 14, message: '隧道序列号前缀长度为14位', trigger: ['blur', 'change']},
+  ],
+  serialNumber: [
+    {required: true, message: '请输入PLC序列号', trigger: ['blur', 'change']},
+    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的PLC序列号', trigger: ['blur', 'change']},
+    {min: 16, max: 16, message: '隧道PLC序列号长度为16位', trigger: ['blur', 'change']},
+    // {validator: validateSerialNumberPrefix, message: '同一隧道的序列号前缀需相同', trigger: ['blur', 'change']}
+  ],
+  serialNumberOne: [
+    // {required: true, message: '请输入序列号2', trigger: ['blur', 'change']},
+    // {validator: validateNumber, message: '请输入英文、数字、英文数字组合的序列号2', trigger: ['blur', 'change']},
+    // { min:16,max:16,message: '隧道序列号2长度为16位',trigger: ['blur', 'change']},
+    // {validator: validateSerialNumberOnePrefix, message: '同一隧道的序列号前缀需相同', trigger: ['blur', 'change']}
+  ],
+  totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
+  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
+  referenceFrequency: [{required: true, message: '请输入基准频率', trigger: ['blur', 'change']}],
+  upTime: [{required: true, message: '请选择升频时间', trigger: ['blur', 'change']}],
+  upFrequency: [{required: true, message: '请输入升频率', trigger: ['blur', 'change']}],
+  dropTime: [{required: true, message: '请选择降频时间', trigger: ['blur', 'change']}],
+  dropFrequency: [{required: true, message: '请输入降频率', trigger: ['blur', 'change']}]
+})
+let clickModel = ref(1)
+const showFirst = ref(true)
+const showOperation = ref(true)
+const formInstance = ref()
+const tunnelList = ref([])
+const coordsList = ref([
+  {
+    tunnelId: 1,
+    coords: '767,1117,793,1182,2379,682,2437,454,2349,505,2298,666,2221,531,2153,578,2212,692,765,1126',
+  }, {
+    tunnelId: 1,
+    coords: '863,1475,1135,1494,2321,1078,3023,801,3214,703,3288,752,2300,1154,1560,1438,1170,1554,844,1529',
+  }, {
+    tunnelId: 94,
+    coords: '1181,1364,2105,622,2005,589,1116,1324'
+  }
+])
+const iconsList = ref([
+  {
+    icon: 'sd_icon_fj.png',
+    name: '风机',
+    type: 'frequency',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_sd.png',
+    name: '湿度',
+    type: 'humidness',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fy.png',
+    name: '风压',
+    type: 'windPressure',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_yq.png',
+    name: '氧气',
+    type: 'oxygen',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fs.png',
+    name: '风速',
+    type: 'windSpeed',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fc.png',
+    name: '粉尘',
+    type: 'dust',
+    num: 1
+  },
+  {
+    icon: 'sd_icon_wd.png',
+    name: '温度',
+    type: 'temperature',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_qt.png',
+    name: '有害气体',
+    type: 'harmfulGas',
+    num: 0
+  },
+])
+const title = ref('新增隧道')
+const showNull = ref(false);
+const isVisited = ref(false);
+const tunnelIds = ref([])
+const tunnelNameList = ref([])
+const siteName = ref(localStorage.getItem('site'))
+const form = ref({
+  tunnelName: '',
+  tunnelAlias: '',
+  serialNumberPrefix: '',
+  serialNumberOne: '',
+  serialNumber: '',
+  totalLength: '',
+  referenceFrequency: '',
+  upTime: '',
+  upFrequency: '',
+  dropTime: '',
+  dropFrequency: '',
+  remarks: '',
+  isDefault: false
+});
+const isEdit = ref(false)
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 12
+});
+const total = ref(10);
+onMounted(() => {
+  showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
+})
+const addSerialNumber = () => {
+  serialNumberList.value.push({
+    serialNumberOne: ''
+  })
+}
+const delSerialNumber = (index) => {
+  serialNumberList.value.splice(index, 1)
+}
+const getSiteImg = () => {
+  showNull.value = false
+  getSiteDrawing(siteId).then((res) => {
+    if (res.code === 1000) {
+      if (res.data.drawingData === null) {
+        // ElMessageBox.confirm('暂无图纸, 是否前往站点管理上传图纸?', '系统提示', {
+        //   confirmButtonText: '确定',
+        //   cancelButtonText: '取消',
+        //   type: 'warning'
+        // }).then(() => {
+        //   router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
+        // }).catch(()=>{
+        showNull.value = true
+        // })
+      } else {
+        showNull.value = false
+        siteImage.value = res.data.drawingData
+      }
+    }
+  });
+}
+const clickHot = (id) => {
+  console.log('点击热区===============')
+  router.push('/' + id + '/' + siteId)
+}
+// const testArr=[]
+const clickHandler = (id) => {
+  // let obj=e.offsetX+','+e.offsetY
+  // testArr.push(obj)
+  // console.log('正确数值',testArr.map(item=>item).join())
+  // console.log('点击',e.offsetX+','+e.offsetY+',')
+  // console.log('图纸', document.getElementById('imgModel').getBoundingClientRect().x,document.getElementById('imgModel').getBoundingClientRect().y)
+}
+const handleGoSiteOrIndex = () => {
+  if (type === 'bySite') {
+    router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
+  } else if (type === 'byHome') {
+    router.push('/' + 'siteToHome/' + siteId)
+  }
+}
+//根据站点id获取隧道信息
+const getTunnel = (id) => {
+  getSiteDetail(id).then((res) => {
+    if (res?.code === 1000) {
+      siteName.value = res.data.siteName
+    }
+  });
+}
+getTunnel(siteId)
+const getList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  getTunnelList({
+    siteId: siteId,
+    ...pageInfo
+  }).then(res => {
+    if (res.code === 1000) {
+      total.value = res.data.total
+      tunnelList.value = res.data.rows
+      showFirst.value = total.value / pageInfo.pageSize >= 1;
+      // siteName.value = res.data.siteName
+    } else {
+      ElMessage.warning(res.msg)
+    }
+    loading.close()
+  })
+}
+getList()
+const firstPage = () => {
+  pageInfo.pageNum = 1
+  getList()
+}
+const lastPage = () => {
+  pageInfo.pageNum = total.value / pageInfo.pageSize
+  getList()
+}
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val
+  getList()
+}
+const handleSubmit = debounce((instance) => {
+  let serialNumberListParam = serialNumberList.value.map(item => item.serialNumberOne)
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    const data = {
+      siteId: siteId,
+      ...form.value,
+      serialNumberList: serialNumberListParam
+    }
+    addTunnel(data).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success('新增成功')
+        getList()
+        isVisited.value = false
+      } else {
+        ElMessage.warning(res.msg)
+      }
+    })
+  })
+}, 100)
+//预览隧道
+const handlePreview = (id) => {
+  console.log('预览')
+  if (id) {
+    getTunnelBySiteId(siteId).then((res) => {
+      if (res?.code === 1000) {
+        if (res.data.filter((item) => item.value == id).length === 0) {
+          ElMessage.warning('当前预览的隧道未准备好, 不予展示, 请添加设备后再试!')
+        } else {
+          router.push('/' + id + '/' + siteId)
+        }
+      }
+    });
+  }
+}
+const handleGoToEditTunnel = (tunnelId) => {
+  isEdit.value = true
+  if (type === 'bySite') {
+    router.push('/edit/' + tunnelId + '/bySite/' + userId)
+  } else if (type === 'byHome') {
+    router.push('/edit/' + tunnelId + '/byHome/' + userId)
+  }
+}
+const handleChooseAll = debounce(() => {
+  tunnelList.value.map(item => {
+    item.checked = !item.checked
+    if (item.checked && !item.isDefault) {
+      tunnelIds.value.push(item.tunnelId)
+    } else if (!item.checked && !item.isDefault) {
+      tunnelIds.value.map((newItem, index) => {
+        if (newItem === item.tunnelId) {
+          tunnelIds.value.splice(index, 1)
+        }
+      })
+    }
+  })
+}, 100)
+const handleEditDevice = (tunnelId) => {
+  if (type === 'bySite') {
+    router.push('/device/' + tunnelId + '/bySite/' + userId)
+  } else if (type === 'byHome') {
+    router.push('/device/' + tunnelId + '/byHome/' + userId)
+  }
+}
+const restFrom = () => {
+  form.value = {
+    tunnelName: '',
+    tunnelAlias: '',
+    serialNumber: '',
+    totalLength: '',
+    referenceFrequency: '',
+    upTime: '',
+    upFrequency: '',
+    dropTime: '',
+    dropFrequency: '',
+    remarks: '',
+    isDefault: false
+  }
+}
+const handleAdd = () => {
+  restFrom()
+  title.value = '新增隧道'
+  isVisited.value = true
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
+}
+const getImageUrl = (name) => {
+  return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
+}
+const handleClickSite = (type) => {
+  if (type.checked) {
+    tunnelIds.value.push(type.tunnelId)
+    tunnelNameList.value.push(type.tunnelName)
+  } else {
+    tunnelIds.value.map((item, index) => {
+      if (item === type.tunnelId) {
+        tunnelIds.value.splice(index, 1)
+      }
+    })
+    tunnelNameList.value.map((item, index) => {
+      if (item === type.tunnelName) {
+        tunnelNameList.value.splice(index, 1)
+      }
+    })
+  }
+}
+const handleMoreDelete = debounce(() => {
+  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)
+        }
+      })
+    })
+  }
+}, 100)
+
+</script>
+
+<style scoped lang="scss">
+.showNull {
+  margin-top: 150px;
+  font-size: 60px;
+  color: #05FEFF;
+}
+
+:deep(.el-form-item__error) {
+  font-size: 35px;
+}
+
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.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;
+}
+
+.model-change {
+  z-index: 55;
+  position: absolute;
+  left: 700px;
+  font-size: 46px;
+  color: #05FEFF;
+  display: flex;
+  //flex-direction: column;
+  .model {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:last-child {
+      margin-left: 30px
+    }
+
+    > span:hover {
+      text-decoration: underline;
+    }
+  }
+
+
+  .card-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_tzdh.png');
+    margin-right: 16px;
+  }
+
+  .img-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_dtdh.png');
+    margin-right: 16px;
+  }
+}
+
+: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;
+  border-radius: 20px;
+  padding: 30px 40px;
+  box-sizing: border-box;
+  //margin: 458px auto 0 auto;
+
+  .el-dialog__header {
+    padding: 0;
+    display: none;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-top: 40px;
+}
+
+:deep(.el-form-item__label) {
+  font-size: 38px;
+  font-family: MicrosoftYaHei;
+  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;
+    }
+
+    .el-input__suffix-inner {
+      font-size: 30px;
+      color: #08B7B8;
+      line-height: 40px;
+      font-weight: bold;
+    }
+  }
+}
+
+.siteId {
+  display: flex;
+  justify-content: center;
+  margin: 0 0 60px 0;
+  font-size: 50px;
+  color: #FFFFFF;
+}
+
+.tunnel-bgc {
+  background-color: #072348;
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/tunnel/sd_bj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: space-between;
+
+    .back-tunnel {
+      cursor: pointer;
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 38px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 23px;
+        width: 33px;
+        height: 33px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+
+    .all-del-btn {
+      display: flex;
+
+      .del-btn {
+        width: 168px;
+        height: 60px;
+        background: #08B7B8;
+        border-radius: 11px;
+      }
+
+      .all-btn {
+        cursor: pointer;
+        padding-left: 53px;
+        width: 178px;
+        height: 70px;
+        line-height: 70px;
+        border-radius: 11px;
+        border: 2px solid #08B7B8;
+        color: #FFFFFF;
+        font-size: 38px;
+
+        &:last-child {
+          margin-left: 40px;
+          margin-right: 70px;
+        }
+      }
+    }
+  }
+
+  .img-box {
+    margin: 100px;
+  }
+
+  .box-content {
+    height: 1850px;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 67px;
+    padding-right: 70px;
+    //justify-content: space-between;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .add-box {
+      cursor: pointer;
+      font-weight: bold;
+      color: #60DDDE;
+      font-size: 38px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .add-icon {
+        margin-top: 110px;
+        margin-bottom: 87px;
+        width: 220px;
+        height: 220px;
+        background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
+      }
+    }
+
+    .site-box {
+      //cursor: pointer;
+      margin-top: 50px;
+      margin-right: 1.5%;
+      padding: 40px 30px;
+      width: 925px;
+      height: 550px;
+      background-image: url('@/assets/images/tunnel/zdgl_bj.png');
+      //box-sizing: border-box;
+      position: relative;
+
+      //&:hover {
+      //  background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
+      //}
+
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        font-size: 45px;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 50px;
+
+        > span {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        > span:nth-child(2) {
+          font-size: 38px;
+          color: #5CE4F2;
+        }
+
+
+        > span:last-child {
+          margin-left: 5px;
+          width: 95px;
+          padding: 1px 8px;
+          font-size: 32px;
+          border: 2px solid #05FEFF;
+          border-radius: 10px;
+          position: relative;
+        }
+      }
+
+      .box-center {
+        display: flex;
+
+        //flex-direction: column;
+        > div:first-child {
+
+          > div:nth-child(2) {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-right: 30px;
+          }
+        }
+
+        .left-img {
+          cursor: pointer;
+          margin-top: 110px;
+          margin-right: 50px;
+          width: 340px;
+          height: 148px;
+          background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
+        }
+
+        .edit-btn {
+          cursor: pointer;
+          margin-top: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          font-size: 30px;
+          color: #60DDDE;
+          //margin-left: 175px;
+
+          .edit-icon {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/site/zdgl_icon_bj.png');
+            margin-right: 10px;
+          }
+
+          .edit-icon-two {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/tunnel/device.png');
+            margin-right: 10px;
+          }
+        }
+
+        .tunnel-right {
+          padding-top: 40px;
+
+          > div:first-child {
+            display: flex;
+            align-items: center;
+            font-size: 36px;
+            color: #FB3838;
+
+            .fan-icon {
+              margin-right: 10px;
+              width: 32px;
+              height: 32px;
+              background-image: url('@/assets/images/tunnel/sp_icon_yc.png');
+            }
+          }
+
+          .icons-block {
+            margin-top: 50px;
+            display: flex;
+            flex-wrap: wrap;
+
+            .icon-text {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              color: #FFFFFF;
+              font-size: 34px;
+              margin-right: 17px;
+              margin-bottom: 30px;
+
+              &:first-child {
+                margin-right: 37px;
+              }
+
+              &:nth-child(2n) {
+                margin-right: 0;
+              }
+
+              .icon {
+                width: 32px;
+                height: 32px;
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    bottom: 50px;
+    color: #60DDDE;
+    font-size: 38px;
+    font-weight: bold;
+
+    :deep(.el-pagination.is-background ) {
+      .btn-next, .btn-prev {
+        background-color: transparent;
+      }
+
+      .el-pager {
+        li {
+          margin: 0 0 0 40px;
+        }
+
+        li.is-active {
+          background-color: #60DDDE;
+        }
+      }
+    }
+
+    > span:first-child {
+      margin-right: 60px;
+    }
+
+    > span:last-child {
+      margin-left: 71px;
+    }
+
+    :deep(.btn-prev) {
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-right: 20px;
+
+    }
+
+    :deep(.btn-next) {
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-left: 30px;
+    }
+
+    :deep(.el-pager li.is-active ) {
+      width: 70px;
+      height: 70px;
+      background: #60DDDE;
+      border-radius: 50%;
+      color: #071F40;
+      font-size: 38px;
+      font-weight: bold;
+    }
+
+    :deep(.el-pager li) {
+      margin-left: 40px;
+    }
+
+    :deep(.el-pager li:not(.is-active) ) {
+      width: 70px;
+      height: 70px;
+      border: 1px solid #60DDDE;
+      border-radius: 50%;
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+    }
+  }
+
+}
+</style>