From 02194afce425da45cd99b8bf95fcd858f6ab5b86 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Mon, 2 Sep 2024 13:13:51 +0800
Subject: [PATCH] =?UTF-8?q?feat=20:=20=E9=9A=A7=E9=81=93=E6=A8=A1=E6=8B=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss              |    1 +
 src/router/index.js                       |   18 +
 src/views/tunnel-simulate/index.vue       | 1012 +++++++++++++++++++
 src/views/tunnel-simulate/tunnel-list.vue | 1112 +++++++++++++++++++++
 4 files changed, 2143 insertions(+)
 create mode 100644 src/views/tunnel-simulate/index.vue
 create mode 100644 src/views/tunnel-simulate/tunnel-list.vue

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 232a863..f199c59 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -119,6 +119,7 @@ body,
     width: 100%;
     display: flex;
     justify-content: center;
+    align-items: center;
     font-size: 50px;
     //font-weight: bold;
     color: #0BE9FA;
diff --git a/src/router/index.js b/src/router/index.js
index 6f0a0f0..bee9b5e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -41,6 +41,24 @@ const routes = [
       breadcrumb: true
     },
   },
+  {
+    path: '/simulate/:tunnelId',
+    name: 'simulateTunnel',
+    component: () => import('@/views/tunnel-simulate/index.vue'),
+    meta: {
+      title: '隧道模拟',
+      breadcrumb: true
+    },
+  },
+  {
+    path: '/simulate/tunnel/list',
+    name: 'tunnelList',
+    component: () => import('@/views/tunnel-simulate/tunnel-list.vue'),
+    meta: {
+      title: '隧道列表',
+      breadcrumb: true
+    },
+  },
   {
     path: '/edit/:tunnelId(\\d+)/:type/:userId(\\d+)',
     name: 'tunneledit',
diff --git a/src/views/tunnel-simulate/index.vue b/src/views/tunnel-simulate/index.vue
new file mode 100644
index 0000000..cbb22f8
--- /dev/null
+++ b/src/views/tunnel-simulate/index.vue
@@ -0,0 +1,1012 @@
+<template>
+  <div id="main">
+    <div class="box-top">
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />
+      <tunnel-title v-if="showTunnelTitle" />
+      <div class="top-length">
+        <span>隧道总长度: {{ tunnelLength }}米</span>
+        <span class="all-btn" @click="startSimulate">开始模拟</span>
+<!--        <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
+      </div>
+      <div class="top-right" v-if="isPreview">
+        <div class="current-site">
+          当前站点：<span>{{ currentSite }}</span>
+          <el-dropdown trigger="click" @command="handleChangeSite" popper-class="dropdown-style">
+            <div class="toggle"></div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
+        item.label
+      }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <el-icon size="50" color="#0BE9FA" style="margin-left: 50px;cursor: pointer"
+            @click="isVisited = true; getAlarmList()">
+            <Bell />
+          </el-icon>
+        </div>
+        <div class="current-user">
+          你好！<span>{{ currentUser }}</span>
+          <span>今天是：{{ currentDate }}</span>
+          <div class="logout" @click="handleLogout"></div>
+        </div>
+      </div>
+    </div>
+    <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
+    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
+    <preview-scene  id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
+      :largeScreen="largeScreen" :fanList="socketData.leftData"></preview-scene>
+    <div class="left" v-if="isPreview">
+      <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
+        :close-on-click-modal="false" :close-on-press-escape="false">
+        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
+          :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId" />
+        <used-ele v-if="showFan" :list="socketData.leftData" :loading="showUsedLoading" :ele-data="largeScreenData" />
+      </el-drawer>
+      <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
+      <div v-else class="shrink-left" @click="closeLeft"></div>
+    </div>
+    <div class="right" v-if="isPreview">
+      <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
+        :close-on-click-modal="false" :close-on-press-escape="false">
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
+          :loading="showWindLoading" />
+        <air-info v-if="showFan" :list="socketData.sensor" :windSpeed="socketData.windSpeed"
+          :air-data="largeScreenData" />
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
+          :loading="showBadLoading" />
+      </el-drawer>
+      <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
+      <div v-else class="shrink-right" @click="closeRight"></div>
+    </div>
+    <div class="switch-btn">
+      <div class="arrow" @click="previousBtn"></div>
+      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex"
+        @change="changeTunnel">
+        <div class="btn">
+          <el-carousel-item v-for="item in tunnelList" :key="item.value">
+            {{ item.label }}
+          </el-carousel-item>
+        </div>
+      </el-carousel>
+      <div class="arrow right" @click="nextBtn"></div>
+    </div>
+  </div>
+  <div class="alarm-dialog alarm-tunnel">
+    <el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情" width="1500px">
+      <div class="detail">
+        <div>报警时间：</div>
+        {{ alarmDetail.alarmTime }}
+      </div>
+      <div class="detail">
+        <div>报警内容：</div>
+        {{ alarmDetail.alarmContent }}
+      </div>
+    </el-dialog>
+  </div>
+  <div class="alarm-tunnel">
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" title="报警信息" width="2175px" :modal="false">
+      <div class="left-top-icon"></div>
+      <div class="right-top-icon"></div>
+      <el-form :model="queryParams" inline class="query-form" ref="queryForm" @submit.prevent="getAlarmList"
+        v-if="roleKey !== 'administrator'">
+        <el-form-item label="查阅状态" prop="lookupStatus">
+          <el-select v-model="queryParams.lookupStatus" placeholder="请选择查阅状态" :fit-input-width="true"
+            :teleported="false" clearable filterable>
+            <el-option label="已读" :value="true" />
+            <el-option label="未读" :value="false" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getAlarmList">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="device-table" :style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }">
+        <el-table stripe v-loading="loading" :empty-text="tableEmptyText"
+          style="background-color: #011c29;--el-table-border-color: none;"
+          :header-cell-style="{ backgroundColor: '#064B66', color: '#fff', fontSize: '40px', borderBottom: 'none' }"
+          :data="alarmList">
+          <el-table-column prop="tunnelName" label="隧道名称" align="center" width="400px" />
+          <el-table-column prop="alarmContent" label="告警信息" align="center" />
+          <el-table-column prop="alarmTime" label="告警时间" align="center" width="480px" />
+          <el-table-column prop="lookupStatus" label="查阅状态" align="center" width="200px"
+            v-if="roleKey !== 'administrator'">
+
+            <template #default="scope">
+              <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'">{{ scope.row.lookupStatus ? '已读' : '未读' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="300px">
+            <template #default="scope">
+              <el-button type="primary" size="mini" style="font-weight: bold" @click="handleView(scope.row)" link>详情
+              </el-button>
+              <el-button type="danger" size="mini" v-if="roleKey !== 'administrator'" @click="handleDelete(scope.row)"
+                link>删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination" :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }">
+          <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" />
+        </div>
+      </div>
+      <div class="left-bottom-icon"></div>
+      <div class="right-bottom-icon"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue"
+import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
+import UsedEle from "@/components/content/usedEle/UsedEle.vue";
+import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
+import AirInfo from "@/components/content/airInfo/AirInfo.vue";
+import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
+import ManageBtn from "@/components/manageBtn/index.vue";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import { dateFormat } from "@/utils/date.js";
+import { getToken } from "@/utils/auth";
+import { useAuthStore } from "@/store/userstore.js";
+import {
+  getLargeScreen,
+  getLargeScreenInfo,
+  getTunnelBySiteId,
+  getAlarmInfo,
+  deleteAlarmSate,
+  getAlarmDetail,
+  updateAlarmState
+} from "@/api/largeScreen";
+import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
+import { getUserInfo } from "@/api/login";
+import { initSceneData } from "@/api/tunnelScene";
+import { getTunnelList } from "@/api/tunnelManage";
+import { debounce } from 'lodash'
+
+
+const authStore = useAuthStore();
+const router = useRouter();
+const previewId = reactive(router.currentRoute.value.params.tunnelId)
+const siteId = reactive(router.currentRoute.value.params.siteId)
+const tunnelIdFlag = reactive(router.currentRoute.value.params.tunnelId)
+const selectIndex = ref(-1);
+const isVisited = ref(false);
+const isDetailVisited = ref(false);
+const showFan = ref(false);
+const drawerLeft = ref(true);
+const showTunnelTitle = ref(true);
+const isPreview = ref(true);
+const loading = ref(false);
+const tableEmptyText = ref("加载中~");
+const initialIndex = ref(0)
+const showFanLoading = ref(0)
+const showUsedLoading = ref(0)
+const showWindLoading = ref(0)
+const showBadLoading = ref(0)
+const drawerRight = ref(true);
+const showMenu = ref(false);
+const currentSiteId = ref(0);
+const currentSite = ref("");
+const siteList = ref([])
+const alarmList = ref([])
+const alarmDetail = ref([])
+const totalTunnelList = ref([])
+const currentUser = ref("");
+const currentUserId = ref(0);
+const currentDate = ref(dateFormat());
+const tunnelBtn = ref();
+const tunnelList = ref([]);
+const tunnelId = ref(0);
+const tunnelLength = ref(0);
+const constructionLength = ref(0);
+const routeList = ref([]);
+let socket = reactive("");
+let pattern = reactive(new RegExp("[A-Za-z]+"));
+let isTunnel = reactive(false)
+// const equipmentOption = ref([])
+const btnList = ref([
+  {
+    route: '/site',
+    icon: 'sp_icon_zdgl.png',
+    name: '站点管理'
+  },
+  {
+    route: '/tunnel',
+    icon: 'sp_icon_sdgl.png',
+    name: '隧道管理'
+  },
+  {
+    route: '/user',
+    icon: 'sp_icon_yhgl.png',
+    name: '用户管理'
+  },
+  // {
+  //   route: '/system',
+  //   icon: 'sp_icon_xtgl.png',
+  //   name: '系统管理'
+  // },
+  // {
+  //   icon: 'sp_icon_mngl.png',
+  //   name: '模拟仿真'
+  // },
+])
+const serialNumber = ref("");
+const roleKey = ref("");
+let token = getToken();
+let send = {
+  type: "ping",
+};
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 10
+});
+const queryForm = ref()
+const form = ref()
+const total = ref(10);
+const largeScreenData = ref(null);
+const socketData = reactive({
+  leftData: [],
+  windPressure: [],
+  sensor: [],
+  windSpeed: [],
+});
+let tunnelLen = computed(() => tunnelLength);
+const queryParams = reactive({
+  equipmentId: '',
+  lookupStatus: ''
+})
+onMounted(() => {
+  getList()
+  getUser()
+  getOtherInfo()
+  nextTick(() => {
+    showFan.value = true;
+  });
+});
+const startSimulate=()=>{
+
+}
+const changeName = (id) => {
+  for (let item of equipmentOption.value) {
+    if (item.value === id) {
+      return item.label;
+    }
+  }
+  return "";
+}
+const handleReset = () => {
+  queryForm.value.resetFields()
+  getAlarmList()
+}
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val
+  getAlarmList()
+}
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`确认删除该报警信息吗？`, '系统提示', {
+    type: 'warning',
+    closeOnClickModal: false
+  }).then(() => {
+    deleteAlarmSate(row.alarmId).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success('删除成功')
+        getAlarmList()
+      }
+    })
+  })
+}
+//查看报警信息详情
+const handleView = (row) => {
+  getAlarmDetail(row.alarmId).then(res => {
+    if (res.code === 1000) {
+      isDetailVisited.value = true
+      alarmDetail.value = res.data
+      if (roleKey.value !== 'administrator') {
+        if (!row.lookupStatus) {
+          handleChangeState(row)
+        }
+      }
+    }
+  })
+}
+const handleChangeState = (row) => {
+  updateAlarmState([{
+    alarmId: row.alarmId,
+    lookupStatus: true,
+    userId: currentUserId.value,
+  }]).then(res => {
+    if (res.code === 1000) {
+      // ElMessage.success(res.msg);
+      getAlarmList()
+    } else {
+      // ElMessage.error(res.msg);
+    }
+  });
+}
+const getAlarmList = () => {
+  loading.value = true
+  getAlarmInfo({
+    tunnelId: tunnelId.value,
+    lookupStatus: queryParams.lookupStatus,
+    ...pageInfo
+  }).then(res => {
+    if (res.code === 1000) {
+      loading.value = false
+      if (res.data.rows.length === 0) {
+        tableEmptyText.value = '暂无数据~'
+      } else {
+        tableEmptyText.value = ''
+      }
+      alarmList.value = res.data.rows
+      total.value = res.data.total
+    }
+  })
+}
+const getUser = () => {
+  getUserInfo().then(res => {
+    currentUser.value = res.data.user.userName
+    currentUserId.value = res.data.user.userId
+    roleKey.value = res.data.roles[0]
+    localStorage.setItem('roleKey', res.data.roles[0])
+    localStorage.setItem('userId', currentUserId.value)
+  })
+}
+
+const getOtherInfo = () => {
+  getLargeScreenInfo().then((res) => {
+    if (res?.code === 1000) {
+      let routeArr = [];
+      res.data.routeList.forEach((item) => {
+        for (let btn of btnList.value) {
+          if (item === btn.route) {
+            routeArr.push(btn)
+          }
+        }
+      })
+      routeList.value = routeArr
+      showMenu.value = true
+      siteList.value = res.data.siteOption
+      tunnelList.value = res.data.tunnelOption
+
+      if (siteId) {
+        currentSiteId.value = siteId
+        currentSite.value = localStorage.getItem('site')
+        showTunnelTitle.value = false
+        nextTick(() => {
+          showTunnelTitle.value = true
+        });
+        getTunnel(siteId)
+      } else {
+        getTunnel(res.data.siteOption[0].value)
+        currentSiteId.value = res.data.siteOption[0].value
+        currentSite.value = res.data.siteOption[0].label
+        localStorage.setItem('site', currentSite.value)
+        localStorage.setItem('currentSiteId', currentSiteId.value)
+      }
+    }
+  });
+};
+const getScreenInfo = (id) => {
+  if (id) {
+    tunnelId.value = id
+    // equipmentOption.value = []
+    getLargeScreen(id).then((res) => {
+      if (res?.code === 1000) {
+        if (res.data.frequencyChangerList.length !== 0) {
+          showFanLoading.value = 0
+        } else {
+          showFanLoading.value = 1
+        }
+        if (res.data.windPressureSensorList.length !== 0) {
+          showWindLoading.value = 0
+        } else {
+          showWindLoading.value = 1
+        }
+        if (res.data.sensorList.length !== 0) {
+          // res.data.sensorList.forEach((item) => {
+          //   option = {
+          //     value: item.equipmentId,
+          //     label: item.equipmentName,
+          //   }
+          //   equipmentOption.value.push(option)
+          // })
+          res.data.sensorList.forEach((item) => {
+            if (
+              item.equipmentType === "dust" ||
+              item.equipmentType === "carbonDioxide" ||
+              item.equipmentType === "carbonMonoxide" ||
+              item.equipmentType === "hydrogenSulfide" ||
+              item.equipmentType === "sulfurDioxide" ||
+              item.equipmentType === "sulfurMonoxide" ||
+              item.equipmentType === "nitrogenDioxide"
+            ) {
+              showBadLoading.value = 0
+            } else {
+              showBadLoading.value = 1
+            }
+          })
+        } else {
+          showBadLoading.value = 1
+        }
+        largeScreenData.value = res.data;
+      } else {
+        ElMessage.warning(res.msg)
+      }
+    });
+    initSceneData(id).then((res) => {
+      tunnelLength.value = res.data.tunnelLength
+      constructionLength.value = res.data.constructionLength
+      // serialNumber.value = res.data.serialNumber.slice(0, -2)
+      serialNumber.value = res.data.serialNumberPrefix
+      initWebSocket();
+    })
+  }
+};
+//这里可以获取隧道简称
+const getList = () => {
+  getTunnelList({
+    siteId: siteId
+  }).then(res => {
+    if (res.code === 1000) {
+      if (res.data.rows.length !== 0) {
+        isTunnel = true;
+        totalTunnelList.value = res.data.rows
+      } else {
+        isTunnel = false
+      }
+    }
+  })
+}
+
+let largeScreen = computed(() => largeScreenData)
+const getTunnel = (id) => {
+  getTunnelBySiteId(id).then((res) => {
+    if (res?.code === 1000) {
+      if (res.data.length === 0) {
+        if (isTunnel) {
+          ElMessage.warning('该站点下没有隧道可展示, 请添加设备后再试!')
+        } else {
+          ElMessage.warning('该站点下没有隧道, 请新增隧道后再试!')
+        }
+      } else {
+        if (!pattern.test(previewId)) {
+          getScreenInfo(previewId)
+          tunnelList.value.forEach((item, index) => {
+            if (item.value == previewId) {
+              initialIndex.value = index
+              tunnelBtn.value.setActiveItem(index)
+            }
+          })
+        } else {
+          tunnelList.value = res.data
+          getScreenInfo(res.data[0]?.value)
+        }
+      }
+    }
+  });
+}
+const changeTunnel = (e) => {
+  socket.close()
+  let newObj = {}
+  tunnelList.value.forEach((item, index) => {
+    if (index === e) {
+      newObj = item
+    }
+  })
+  showFan.value = false
+  showBadLoading.value = 0
+  showWindLoading.value = 0
+  showFanLoading.value = 0
+  // showUsedLoading.value = 0
+  pageInfo.pageNum = 1
+  getScreenInfo(newObj.value)
+  nextTick(() => {
+    showFan.value = true;
+  });
+
+}
+const manageSelect = (index) => {
+
+  if (index === '站点管理') {
+    if (currentUserId.value) {
+      router.push("/site/" + currentUserId.value + '/' + currentSiteId.value);
+    }
+  } else if (index === '隧道管理') {
+    if (currentSiteId.value && currentUserId.value) {
+      router.push("/tunnel/" + localStorage.getItem('currentSiteId') + '/byHome/' + currentUserId.value);
+    }
+  } else if (index === '用户管理') {
+    if (currentSiteId.value) {
+      router.push("/user/" + localStorage.getItem('currentSiteId'));
+    }
+  }
+  socket.close()
+};
+const handleChangeSite = debounce((item) => {
+  socket.close()
+  currentSite.value = item.label
+  currentSiteId.value = item.value
+  getTunnel(item.value)
+  showFan.value = false
+  nextTick(() => {
+    showFan.value = true;
+  });
+  localStorage.setItem('site', currentSite.value)
+  localStorage.setItem('currentSiteId', currentSiteId.value)
+  if (tunnelIdFlag) {
+    router.push('/' + tunnelIdFlag + '/' + currentSiteId.value)
+  }
+  showTunnelTitle.value = false
+  nextTick(() => {
+    showTunnelTitle.value = true
+  });
+}, 100)
+const closeLeft = () => {
+  drawerLeft.value = !drawerLeft.value;
+};
+const closeRight = () => {
+  drawerRight.value = !drawerRight.value;
+};
+const handleLogout = () => {
+  ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    authStore.userLogout();
+    router.push("/login");
+  })
+};
+const previousBtn = () => {
+  tunnelBtn.value.prev();
+};
+const nextBtn = () => {
+  tunnelBtn.value.next();
+};
+
+const initWebSocket = () => {
+  // let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
+  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
+  // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
+  // let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
+  socket = new WebSocket(wsUrl);
+  //连接发生错误的回调方法
+  socket.onerror = function () {
+    console.log("ws连接发生错误");
+  };
+  //连接成功建立的回调方法
+  socket.onopen = function () {
+    console.log("ws连接成功");
+  };
+  //接收到消息的回调方法
+  socket.onmessage = function (event) {
+    console.log("服务器返回的信息: ", JSON.parse(event.data));
+    const type = JSON.parse(event.data).type;
+    const data = JSON.parse(event.data).data;
+    if (type === "equipment") {
+      data.forEach((item) => {
+        if (item.typeKey === "frequency") {
+          socketData.leftData = data;
+          // console.log(socketData.leftData);
+        } else if (item.typeKey === "windPressure") {
+          socketData.windPressure = data;
+        } else if (item.typeKey === "sensor") {
+          socketData.sensor = data;
+        } else if (item.typeKey === "windSpeed") {
+          socketData.windSpeed = data;
+        }
+      });
+    }
+
+  };
+  //连接关闭的回调方法
+  socket.onclose = function () {
+    console.log("ws连接关闭");
+    // initWebSocket()
+  };
+  setInterval(() => {
+    socket.send(JSON.stringify(send));
+  }, 30000);
+};
+</script>
+
+<style lang="scss">
+.el-drawer__header {
+  display: none;
+}
+
+.el-drawer__body {
+  padding: 160px 68px 0 68px;
+  overflow: hidden;
+}
+
+.el-dropdown__popper.el-popper {
+  background: transparent;
+  //border: none;
+  border: 1px solid #0E7DAA;
+  border-radius: 10px;
+}
+
+.dropdown-style {
+  padding: 20px;
+  margin-left: 50px;
+  width: 150px;
+  background: rgba(7, 35, 72, 0.9);
+
+  .el-scrollbar__wrap {
+    .el-dropdown__list {
+      .el-dropdown-menu {
+        background-color: rgba(7, 35, 72, 0.9);
+        border-radius: 10px;
+        padding: 5px;
+
+        .el-dropdown-menu__item {
+          color: #FFFFFF;
+          //border:none;
+          padding: 5px;
+
+          border-bottom: 1px solid #05FEFF;
+
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+
+        .el-dropdown-menu__item.hover,
+        .el-dropdown-menu__item:hover {
+          background-color: transparent !important;
+          color: #F7B500;
+        }
+      }
+    }
+  }
+
+  .is-light {
+    background: rgba(7, 35, 72, 0.9);
+  }
+
+}
+</style>
+
+<style lang="scss" scoped>
+.all-btn {
+  cursor: pointer;
+  padding: 10px 20px;
+  border-radius: 11px;
+  border: 2px solid #08B7B8;
+  color: #0BE9FA;
+  text-align: center;
+  margin-left: 40px;
+  font-size: 38px;
+  &:hover{
+    color: #f7b500;
+  }
+}
+#main {
+  height: 100%;
+  width: 100%;
+  background-color: #072348;
+
+  #tunnel-box {
+    height: 100%;
+  }
+}
+
+.alarm-dialog {
+  :deep(.el-dialog) {
+    height: auto !important;
+    margin: 820px auto 0 auto;
+  }
+}
+
+:deep(.el-table__body-wrapper) {
+  height: 90px;
+
+}
+
+:deep(.el-table--fit) {
+  width: auto;
+  //height: 600px;
+  background-color: transparent !important;
+
+  .el-loading-mask {
+    background: rgba(6, 34, 71, 0.78);
+
+    .el-loading-spinner {
+      .circular {
+        width: 150px;
+        height: 150px;
+      }
+    }
+  }
+}
+
+:deep(.el-table__empty-block) {
+  height: 200px !important;
+
+  //display: none;
+  .el-table__empty-text {
+    font-size: 60px;
+    color: #08B7B8;
+  }
+}
+
+
+.query-form {
+  :deep(.el-form-item__label) {
+    font-size: 45px;
+    height: 70px;
+    line-height: 70px;
+    color: #FFFFFF;
+  }
+
+  :deep(.el-select__wrapper.is-hovering) {
+    .el-select__suffix {
+      .el-icon {
+        font-size: 55px;
+      }
+    }
+  }
+
+  :deep(.el-select-dropdown__item.is-hovering) {
+    background-color: #064B66 !important;
+  }
+
+  :deep(.el-select__wrapper) {
+    height: 70px;
+    line-height: 70px;
+    background-color: transparent;
+    border: 1px solid #08B7B8;
+    font-size: 35px;
+    width: 356px;
+
+    .el-select__suffix {
+      .el-icon {
+        font-size: 55px;
+      }
+    }
+
+    .el-select__placeholder {
+      color: #FFFFFF;
+      height: 70px;
+      line-height: 70px;
+    }
+
+    .el-select__placeholder.is-transparent {
+      height: 70px;
+      line-height: 70px;
+    }
+  }
+
+  :deep(.el-form-item__content) {
+    .el-select__popper {
+      margin-top: -12px !important;
+      background: #072247 !important;
+      border: 1px solid #0F82AF !important;
+
+      .el-select-dropdown__item {
+        font-size: 38px !important;
+        height: 70px !important;
+        line-height: 70px !important;
+
+        >span {
+          color: #FFFFFF;
+        }
+      }
+
+      .el-select-dropdown__item.hover,
+      .el-select-dropdown__item:hover {
+        background-color: #064B66 !important;
+      }
+    }
+
+    .el-button {
+      height: 70px;
+      font-size: 40px;
+      border-radius: 10px;
+    }
+
+    .el-button--primary {
+      background: #064B66;
+    }
+
+    .el-input {
+      width: 380px;
+      height: 70px;
+
+      .el-input__wrapper {
+        font-size: 40px;
+        background-color: transparent;
+        border: 1px solid #08B7B8;
+        box-shadow: none;
+
+        .el-input__inner {
+          height: 70px;
+          color: #FFFFFF;
+        }
+
+        .el-input__suffix-inner {
+          .el-icon {
+            font-size: 55px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.device-table {
+  margin-top: 7px;
+
+  :deep(.el-button) {
+    font-size: 40px;
+  }
+
+  .active {
+    color: #FFFFFF;
+    background: #0f7da9;
+  }
+
+  .wind-switch {
+    margin-left: 65px;
+  }
+
+  .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;
+  }
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  bottom: 0;
+  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 !important;
+  }
+
+  :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-simulate/tunnel-list.vue b/src/views/tunnel-simulate/tunnel-list.vue
new file mode 100644
index 0000000..8b50ca5
--- /dev/null
+++ b/src/views/tunnel-simulate/tunnel-list.vue
@@ -0,0 +1,1112 @@
+<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>
+            <!--            @click="handlePreview(item.tunnelId)"-->
+            <div class="left-img"></div>
+            <div style="display: flex;justify-content: center">
+              <div class="edit-btn" @click.stop="handleGoToSimulateTunnel(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 style="width: 925px; height: 0" v-for="n in 8" :key="n"></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 style="display:flex;align-items:center;justify-content:flex-end;font-size: 38px;color: #08B7B8;">
+            <span style="cursor: pointer;" @click="addSerialNumber">添加序列号</span>
+            <el-icon size="74" color="#08B7B8" style="margin-left: 20px;cursor: pointer;" @click="addSerialNumber">
+              <CirclePlus/>
+            </el-icon>
+          </div>
+          <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 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 handleGoToSimulateTunnel=(tunnelId)=>{
+  router.push('/simulate/' + tunnelId)
+}
+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(1)
+const getList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  getTunnelList({
+    siteId: 1,
+    ...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 (serialNumberList.value?.length > 0 && !serialNumberList.value[0].serialNumber && !serialNumberList.value[0].serialNumberType) {
+    serialNumberList.value = []
+  }
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    const data = {
+      siteId: siteId,
+      ...form.value,
+      tunnelGatewayDtoList: serialNumberList.value
+    }
+    console.info("🚀 ~method:data -----", data)
+    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: 0.65;
+    justify-content: flex-end;
+  }
+
+  .box-content {
+    height: 1850px;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 67px;
+    //padding-right: 70px;
+    align-content: flex-start;
+    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/tunnel/device.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>