feat : 新增报警信息功能

src/api/largeScreen.js

@@ -93,3 +93,32 @@ export const editFrequencyOperationSwitch = (data) => {
     data
   })
 }
+export const getAlarmInfo = (params) => {
+  return request({
+    url: '/tunnel/alarm',
+    method: 'get',
+    params
+  })
+}
+export const getAlarmDetail = (alarmId) => {
+  return request({
+    url: '/tunnel/alarm/details',
+    method: 'get',
+    params:{
+      alarmId:alarmId
+    }
+  })
+}
+export const updateAlarmState = (data) => {
+  return request({
+    url: '/tunnel/alarm',
+    method: 'put',
+    data
+  })
+}
+export const deleteAlarmSate = (tunnelAlarmIdList) => {
+  return request({
+    url: `/tunnel/alarm/${tunnelAlarmIdList}`,
+    method: 'delete'
+  })
+}

src/api/site.js

@@ -13,6 +13,15 @@ export const getSiteDetail = (siteId) => {
     method: 'get'
   })
 }
+export const getSiteDrawing = (siteId) => {
+  return request({
+    url: '/tunnel/site/drawing',
+    method: 'get',
+    params:{
+      siteId:siteId
+    }
+  })
+}
 export const editSite = (data) => {
   return request({
     url: '/tunnel/site',

src/api/tunnelManage.js

@@ -36,6 +36,12 @@ export const getEquipmentList = (tunnelId) => {
     }
   })
 }
+export const getEquipmentDetail = (equipmentId) => {
+  return request({
+    url: `/tunnel/equipment/?equipmentId=${equipmentId}`,
+    method: 'get'
+  })
+}
 export const editTunnel = (data) => {
   return request({
     url: '/tunnel/model/details',

src/assets/styles/index.scss

@@ -586,34 +586,35 @@ body,
 }
 
 .current-site {
+  .site-bg {
+    .el-select-dropdown {
+      width: 200px !important;
+    }
 
-  .el-select-dropdown {
+    .el-select-dropdown__item {
-    width: 200px !important;
+      color: #fff !important;
-  }
+    }
 
-  .el-select-dropdown__item {
+    .el-select-dropdown__item.hover {
-    color: #fff !important;
+      background-color: #072247 !important;
-  }
+    }
 
-  .el-select-dropdown__item.hover {
+    .el-select-dropdown__item:hover {
-    background-color: #072247 !important;
+      background-color: #072247 !important;
-  }
+      color: #08B7B8 !important;
+    }
 
-  .el-select-dropdown__item:hover {
+    .el-select-dropdown__item.selected {
-    background-color: #072247 !important;
+      color: #08B7B8 !important;
-    color: #08B7B8 !important;
+    }
-  }
 
-  .el-select-dropdown__item.selected {
+    .el-select-dropdown__list {
-    color: #08B7B8 !important;
+      .el-select-dropdown__item:first-child {
-  }
+        color: #FFFFFF;
 
-  .el-select-dropdown__list {
+        &:hover {
-    .el-select-dropdown__item:first-child {
+          color: #08B7B8 !important;
-      color: #FFFFFF;
+        }
-
-      &:hover {
-        color: #08B7B8 !important;
       }
     }
   }

src/views/site/index.vue

@@ -101,13 +101,21 @@
     </el-dialog>
 
     <el-dialog :close-on-click-modal="false" v-model="isUploadVisited" width="1558px">
+      <div @click="isUploadVisited=false" style="position: absolute;right: 20px;top:10px;cursor: pointer">
+        <el-icon size="80" color="#fff">
+          <Close/>
+        </el-icon>
+      </div>
       <el-upload
-          class="upload-demo"
+          style="margin-top:40px"
           drag
           limit="1"
           :action="uploadFileUrl"
-          :auto-upload="false"
+          :auto-upload="true"
+          :headers="headers"
+          :data="uploadData"
           :on-success="handleUploadSuccess"
+          :before-upload="beforeUpload"
       >
         <el-icon>
           <upload-filled/>
@@ -115,17 +123,12 @@
         <div class="el-upload__text">
           拖拽一张图纸到这里 或者 <em>点击上传</em>
         </div>
+        <template #tip>
+          <div class="el-upload__tip">
+            文件限制大小为 16MB
+          </div>
+        </template>
       </el-upload>
-      <template #footer>
-        <div class="btns">
-          <div class="cancel-btn" @click="isUploadVisited=false">
-            取消
-          </div>
-          <div class="sure-btn" @click="handleSubmit(formInstance)">
-            确定
-          </div>
-        </div>
-      </template>
     </el-dialog>
     <div class="pagination">
       <span @click="firstPage" v-if="showFirst">首页</span>
@@ -141,6 +144,7 @@
 import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/site";
 import {ElMessage, ElMessageBox} from "element-plus";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {getToken} from '@/utils/auth'
 
 const router = useRouter()
 const userId = reactive(router.currentRoute.value.params.userId)
@@ -148,9 +152,13 @@ const siteId = reactive(router.currentRoute.value.params.siteId)
 const siteList = ref([])
 const siteIds = ref([])
 const siteNameList = ref([])
+const clickSiteId = ref('')
+const uploadData = ref()
 const baseURL = import.meta.env.VITE_BASE_URL
-// const uploadFileUrl = ref(baseURL + "/workflow/process/file");
+const uploadFileUrl = ref(baseURL + '/tunnel/site/upload');
-const uploadFileUrl = ref("#");
+const headers = reactive({
+  authorization: getToken()
+})
 const info = ref({
   tunnelName: '',
   constructionLength: 0,
@@ -176,13 +184,17 @@ const formRules = ref({
   siteName: [{required: true, message: '请输入站点名称', trigger: ['blur', 'change']}]
 })
 const formInstance = ref()
-const handleUploadSuccess = (res, file) => {
+const beforeUpload = () => {
-  console.log('file', file)
+  uploadData.value = {
+    siteId: clickSiteId.value
+  }
+}
+const handleUploadSuccess = (res) => {
   if (res.code !== 1000) {
     ElMessage.error("上传失败");
+  } else {
+    ElMessage.success("上传成功");
   }
-  let data = res.data;
-  // attachmentList.value.push(data);
 };
 
 const handleGoHome = () => {
@@ -255,6 +267,7 @@ const handleEdit = (item) => {
 }
 const handleUpload = (siteId) => {
   isUploadVisited.value = true
+  clickSiteId.value = siteId
 }
 const handleAdd = () => {
   restFrom()
@@ -356,6 +369,11 @@ const handleCurrentChange = (val) => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-upload__tip) {
+  font-size: 40px;
+  color: #FFFFFF;
+}
+
 :deep(.el-upload-dragger) {
   background-color: transparent;
   box-shadow: none;
@@ -373,22 +391,29 @@ const handleCurrentChange = (val) => {
   .el-upload__text {
     font-size: 50px;
     color: #FFFFFF;
-    em{
+
+    em {
       color: #05FEFF;
     }
   }
 }
 
 :deep(.el-upload-list) {
-  .el-upload-list__item{
+  .el-upload-list__item {
     &:hover {
       background-color: transparent;
     }
-    .el-icon{
+
+    .el-icon {
       font-size: 61px;
       color: #FFFFFF;
     }
+
+    .el-icon--close-tip {
+      display: none;
+    }
   }
+
   .el-upload-list__item-name {
     font-size: 61px !important;
     color: #FFFFFF;

src/views/tunnel-manage/index.vue

@@ -74,7 +74,8 @@
     </div>
     <div v-else>
       <div class="img-box">
-        <img src="@/assets/images/tunnel/img.png" style="width:3500px;height:1789px" id="imgModel" usemap="#image"
+<!--        @/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=""
@@ -153,15 +154,15 @@
 <script setup>
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
-import {getSiteDetail} from "@/api/site";
+import {getSiteDrawing,getSiteDetail } from "@/api/site";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
 import {getTunnelBySiteId} from "@/api/largeScreen";
-
 const validateNumber = (rule, value) => {
   const reg = /^[A-Za-z0-9]+$/;
   return reg.test(value);
 }
 const router = useRouter()
+const siteImage = ref()
 const showAddIcon = ref(true)
 const params = router.currentRoute.value.params;
 const siteId = reactive(params.siteId)
@@ -182,7 +183,7 @@ const formRules = ref({
   dropTime: [{required: true, message: '请选择降频时间', trigger: ['blur', 'change']}],
   dropFrequency: [{required: true, message: '请输入降频率', trigger: ['blur', 'change']}]
 })
-const clickModel = ref(1)
+let clickModel = ref(1)
 const showFirst = ref(true)
 const showOperation = ref(true)
 const formInstance = ref()
@@ -192,10 +193,10 @@ 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: 91,
+    tunnelId: 1,
     coords: '863,1475,1135,1494,2321,1078,3023,801,3214,703,3288,752,2300,1154,1560,1438,1170,1554,844,1529',
   }, {
-    tunnelId: 1,
+    tunnelId: 94,
     coords: '1181,1364,2105,622,2005,589,1116,1324'
   }
 ])
@@ -276,6 +277,14 @@ const total = ref(10);
 onMounted(() => {
   showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
 })
+const getSiteImg = () => {
+  getSiteDrawing(siteId).then((res) => {
+    if(res.code === 1000){
+      siteImage.value=res.data.drawingData
+    }
+  });
+}
+getSiteImg()
 const clickHot = (id) => {
   console.log('点击热区===============')
   router.push('/' + id + '/' + siteId)

src/views/tunnel/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
-      <tunnel-title v-if="showTunnelTitle" />
+      <tunnel-title v-if="showTunnelTitle"/>
       <div class="top-length">
         <!--        <span>隧道总长度: {{ tunnelLength }}米</span>-->
         <span>当前施工长度: {{ constructionLength }}米</span>
@@ -10,17 +10,21 @@
       <div class="top-right">
         <div class="current-site">
           当前站点：<span>{{ currentSite }}</span>
-          <el-dropdown trigger="click" @command="handleChangeSite">
+          <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
+                    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>
@@ -32,25 +36,25 @@
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
     <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
-      :largeScreen="largeScreen"></preview-scene>
+                   :largeScreen="largeScreen"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-          :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId" />
+                  :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId"/>
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
+        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
     </div>
     <div class="right">
       <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
-          :loading="showWindLoading" />
+                            :loading="showWindLoading"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
+        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
         <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
-          :loading="showBadLoading" />
+                      :loading="showBadLoading"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -58,7 +62,7 @@
     <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">
+                   @change="changeTunnel">
         <div class="btn">
           <el-carousel-item v-for="item in tunnelList" :key="item.value">
             {{ item.label }}
@@ -68,6 +72,85 @@
       <div class="arrow right" @click="nextBtn"></div>
     </div>
   </div>
+  <div class="alarm-dialog digital-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="digital-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">
+        <el-table stripe
+                  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="equipmentId" label="设备名称" align="center" width="400px">-->
+          <!--            <template #default="scope">-->
+          <!--              {{ changeName(scope.row.equipmentId) }}-->
+          <!--            </template>-->
+          <!--          </el-table-column>-->
+          <el-table-column prop="alarmContent" label="告警信息" align="center">
+            <template #default="scope">
+              <div class="alarm-content" :style="{width:roleKey==='administrator'?'':'730px'}">{{
+                  scope.row.alarmContent
+                }}
+              </div>
+            </template>
+          </el-table-column>
+          <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">
+          <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>
@@ -79,15 +162,22 @@ 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 {dateFormat} from "@/utils/date.js";
-import { getToken } from "@/utils/auth";
+import {getToken} from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
+import {useAuthStore} from "@/store/userstore.js";
-import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
+import {
-import { ElMessage, ElMessageBox } from "element-plus";
+  getLargeScreen,
-import { getUserInfo } from "@/api/login";
+  getLargeScreenInfo,
-import { initSceneData } from "@/api/tunnelScene";
+  getTunnelBySiteId,
-import { getTunnelList } from "@/api/tunnelManage";
+  getAlarmInfo,
-import { computed } from "vue";
+  deleteAlarmSate,
+  getAlarmDetail,
+  updateAlarmState
+} from "@/api/largeScreen";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {getUserInfo} from "@/api/login";
+import {initSceneData} from "@/api/tunnelScene";
+import {getTunnelList} from "@/api/tunnelManage";
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -95,6 +185,8 @@ 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);
@@ -107,6 +199,8 @@ 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);
@@ -120,8 +214,7 @@ 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',
@@ -149,10 +242,17 @@ const btnList = ref([
   // },
 ])
 const serialNumber = ref("");
+const roleKey = ref("");
 let token = getToken();
 let send = {
   type: "ping",
 };
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 10
+});
+const queryForm = ref()
+const total = ref(10);
 const largeScreenData = ref(null);
 const socketData = reactive({
   leftData: [],
@@ -160,7 +260,10 @@ const socketData = reactive({
   sensor: [],
 });
 let tunnelLen = computed(() => tunnelLength);
-
+const queryParams = reactive({
+  equipmentId: '',
+  lookupStatus: ''
+})
 onMounted(() => {
   getList()
   getUser()
@@ -168,20 +271,87 @@ onMounted(() => {
   nextTick(() => {
     showFan.value = true;
   });
-});
 
+});
+const changeName = (id) => {
+  for (let item of equipmentOption.value) {
+    if (item.value === id) {
+      return item.label;
+    }
+  }
+  return "";
+}
+const handleReset = () => {
+  queryForm.value.resetFields()
+  getList()
+}
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val
+  getAlarmList()
+}
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`确认删除名称为${changeName(row.equipmentId)}的报警信息吗？`, '系统提示', {
+    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') {
+        handleChangeState(row)
+      }
+    }
+  })
+}
+const handleChangeState = (row) => {
+  updateAlarmState([{
+    alarmId: row.alarmId,
+    lookupStatus: true,
+    userId: currentUserId.value,
+  }]).then(res => {
+    if (res.code === 1000) {
+      // ElMessage.success(res.msg);
+    } else {
+      // ElMessage.error(res.msg);
+    }
+  });
+}
+const getAlarmList = () => {
+  getAlarmInfo({
+    tunnelId: tunnelId.value,
+    lookupStatus: queryParams.lookupStatus,
+    ...pageInfo
+  }).then(res => {
+    if (res.code === 1000) {
+      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
-    localStorage.setItem('roleKey', res.data.user.roles[0].roleKey)
+    roleKey.value = res.data.roles[0]
+    localStorage.setItem('roleKey', res.data.roles[0])
     localStorage.setItem('userId', currentUserId.value)
   })
 }
 
 const getOtherInfo = () => {
   getLargeScreenInfo().then((res) => {
-    // console.log(res);
     if (res?.code === 1000) {
       let routeArr = [];
       res.data.routeList.forEach((item) => {
@@ -205,7 +375,6 @@ const getOtherInfo = () => {
         nextTick(() => {
           showTunnelTitle.value = true
         });
-        console.log('siteId', siteId)
         getTunnel(siteId)
       } else {
         getTunnel(res.data.siteOption[0].value)
@@ -220,27 +389,50 @@ const getOtherInfo = () => {
 const getScreenInfo = (id) => {
   if (id) {
     tunnelId.value = id
+    equipmentOption.value = []
     getLargeScreen(id).then((res) => {
       if (res?.code === 1000) {
+        let option = {}
         if (res.data.frequencyChangerList.length !== 0) {
+          res.data.frequencyChangerList.forEach((item) => {
+            option = {
+              value: item.equipmentId,
+              label: item.equipmentName,
+            }
+            equipmentOption.value.push(option)
+          })
           showFanLoading.value = 0
         } else {
           showFanLoading.value = 1
         }
         if (res.data.windPressureSensorList.length !== 0) {
+          res.data.windPressureSensorList.forEach((item) => {
+            option = {
+              value: item.equipmentId,
+              label: item.equipmentName,
+            }
+            equipmentOption.value.push(option)
+          })
           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 === "carbonDioxide" ||
+                item.equipmentType === "carbonDioxide" ||
-              item.equipmentType === "carbonMonoxide" ||
+                item.equipmentType === "carbonMonoxide" ||
-              item.equipmentType === "hydrogenSulfide" ||
+                item.equipmentType === "hydrogenSulfide" ||
-              item.equipmentType === "sulfurDioxide" ||
+                item.equipmentType === "sulfurDioxide" ||
-              item.equipmentType === "sulfurMonoxide" ||
+                item.equipmentType === "sulfurMonoxide" ||
-              item.equipmentType === "nitrogenDioxide"
+                item.equipmentType === "nitrogenDioxide"
             ) {
               showBadLoading.value = 0
             } else {
@@ -251,6 +443,7 @@ const getScreenInfo = (id) => {
           showBadLoading.value = 1
         }
         largeScreenData.value = res.data;
+        // console.log(largeScreenData.value);
       } else {
         ElMessage.warning(res.msg)
       }
@@ -268,8 +461,6 @@ const getList = () => {
   getTunnelList({
     siteId: siteId
   }).then(res => {
-    //这里拿到我们的隧道简称
-
     if (res.code === 1000) {
       if (res.data.rows.length !== 0) {
         isTunnel = true;
@@ -298,7 +489,6 @@ const getTunnel = (id) => {
           getScreenInfo(previewId)
         } else {
           getScreenInfo(res.data[0]?.value)
-          console.log(res);
         }
         tunnelList.value = res.data
         tunnelList.value.forEach((item, index) => {
@@ -320,6 +510,7 @@ const changeTunnel = (e) => {
   showBadLoading.value = 0
   showWindLoading.value = 0
   showFanLoading.value = 0
+  pageInfo.pageNum = 1
   getScreenInfo(newObj.value)
   nextTick(() => {
     showFan.value = true;
@@ -440,11 +631,7 @@ const initWebSocket = () => {
   border-radius: 10px;
 }
 
-.is-light {
+.dropdown-style {
-  background: rgba(7, 35, 72, 0.9);
-}
-
-.el-popper {
   padding: 20px;
   margin-left: 50px;
   width: 150px;
@@ -477,6 +664,11 @@ const initWebSocket = () => {
       }
     }
   }
+
+  .is-light {
+    background: rgba(7, 35, 72, 0.9);
+  }
+
 }
 </style>
 
@@ -490,4 +682,257 @@ const initWebSocket = () => {
     height: 100%;
   }
 }
+
+.alarm-dialog {
+  :deep(.el-dialog ) {
+    height: auto !important;
+    margin: 820px auto 0 auto;
+  }
+}
+
+.digital-tunnel {
+  .detail {
+    font-size: 50px;
+    color: #FFFFFF;
+
+    > div {
+      color: #f5f5f5;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.digital-tunnel {
+  :deep(.el-dialog ) {
+    height: 1380px;
+
+    .alarm-content {
+      //width: 730px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .el-tag {
+      font-size: 36px;
+      height: 60px;
+      padding: 0 20px;
+      border-radius: 10px;
+    }
+  }
+}
+
+.query-form {
+  :deep(.el-form-item__label) {
+    font-size: 45px;
+    height: 70px;
+    line-height: 70px;
+    color: #FFFFFF;
+  }
+
+  :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: 40px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.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;
+
+  > 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>

src/views/user/index.vue

@@ -169,7 +169,7 @@ const form = ref({
   nickName: '',
   phoneNumber: '',
   state: '1',
-  roleId: [],
+  roleId: 3,
   tunnelList: [1]
 });
 const validateName = (rule, value) => {
@@ -207,6 +207,10 @@ const handleAddUser = () => {
   reset()
   title.value = '添加用户'
   isVisited.value = true
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
 }
 const handleEditUser = (row) => {
   reset()
@@ -247,7 +251,7 @@ const reset = () => {
     nickName: '',
     phoneNumber: '',
     state: '1',
-    roleId: [],
+    roleId: 3,
     tunnelList: []
   }
 }