更新

src/views/home/index.vue

@@ -58,15 +58,13 @@
     </div>
     <!-- 中间 -->
     <div class="home-center">
-      <div class="middle-top">
+      <div class="middle-top"><Yszs /></div>
-        <Yszs />
-      </div>
       <div class="flex middle-bottom mt10">
         <div style="width: 30px;position: absolute;z-index: 100;left: 0;background-color: #07274d;height: 30px;text-align: center;line-height:30px;">
           <el-icon :size="20" v-if="ispLayBack" @click="closeLayBack">
             <Bell />
           </el-icon>
-          <el-icon :size="20" v-else @click="openLayBack">
+          <el-icon :size="20" v-else @click="ispLayBack=true">
             <MuteNotification />
           </el-icon>
         </div>
@@ -175,6 +173,16 @@ const modelQbsb = ref(true)
 const searchText = ref('')
 const peoDialogRef = ref()
 const showSeatch = ref(false)
+const ispLayBack = ref(true)//播放音频
+const indexNum = ref(0) //当前展示的气泡框
+const showNotification = ref(false) //是否自动展开提示
+const allDep = ref([]) //所有部门
+const bnTimer = ref(null)
+const popupTimer = ref(null)
+let timing = ref(true)
+const reversalPushShow = ref(true)// 情报翻转
+const reversalShow = ref(true)// 论坛翻转
+
 const changeXzqh = (val, trg) => {
   setTimeout(() => {
     // 先移除已有的边界
@@ -262,9 +270,6 @@ const getDepId = () => {
   }
 }
 
-const indexNum = ref(0) //当前展示的气泡框
-const showNotification = ref(false) //是否自动展开提示
-const allDep = ref([]) //所有部门
 const handleOpenNotification = () => {
   clearInterval(popupTimer.value)
   showNotification.value = !showNotification.value;
@@ -289,12 +294,7 @@ const makerCenter = () => {
   })
 
 }
-//播放音频
+
-const ispLayBack = ref(true)
-// 打开播放
-const openLayBack = () => {
-  ispLayBack.value = true
-}
 // 关闭播放
 const closeLayBack = () => {
   ispLayBack.value = false
@@ -315,8 +315,6 @@ const initAudioPlayer = () => {
       console.error('初始化音频播放器失败:', error);
     })
 }
-const bnTimer = ref(null)
-const popupTimer = ref(null)
 
 const startPopupLoop = () => {
   clearInterval(popupTimer.value)
@@ -328,6 +326,62 @@ const startPopupLoop = () => {
     }
   }, 10000)
 }
+
+// 搜索
+const handleSearch = () => {
+  if(!searchText.value) return proxy.$message.warning('请输入身份证号');
+  qcckPost({ rysfzh: searchText.value },'/mosty-gsxt/tbYjxx/getPageAllList').then(res => {
+    peoDialogRef.value.init(res.records || [])
+  })
+}
+
+// 布控预警上图
+const getTbYjxxGetList = () => {
+  // 设置为当天时间范围：00:00:00 到 23:59:59
+  const today = new Date();
+  const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0).getTime();
+  const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59).getTime();
+  const promes = { startTime:timeValidate(startTime), endTime:timeValidate(endTime), }
+  tbYjxxGetList(promes).then(res => {
+    const coords = res.map(item => {
+      return { id: item.id, jd: item.jd, wd: item.wd, yjtp: item.yjTp, yjnr: item.yjNr, yjLx: item.yjlx, yjlx: '01', yjsj: item.yjSj, rysfzh: item.yjRysfzh, ryxm: item.yjRyxm }
+    })
+    const icon = require("@/assets/point/yj.png")
+    emitter.emit('addPoint', { coords: coords, icon: icon, flag: 'yj', fontColor: '#FF0000' })
+  })
+}
+
+const reversalPush = () => {
+  reversalPushShow.value = !reversalPushShow.value
+  // 移除clearInterval调用，避免定时器被清除
+}
+
+const reversal= () => {
+  reversalShow.value = !reversalShow.value
+  // 移除clearInterval调用，避免定时器被清除
+}
+
+// 鼠标移入
+const mouseEnter = () => {
+  clearInterval(timing.value)
+}
+
+// 鼠标移出
+const mouseLeave = () => {
+  // 清除可能存在的旧定时器，避免多个定时器同时运行
+  clearInterval(timing.value)
+  // 设置为5秒自动切换，更容易测试效果
+  timing.value = setInterval(() => {
+    reversalPush()
+    reversal()
+    changeModel()
+  }, 30000)
+}
+
+function changeModel(){
+  modelWarning.value = !modelWarning.value
+}
+
 // 组件挂载时初始化音频播放器
 onMounted(() => {
   getDepId()
@@ -373,88 +427,12 @@ onMounted(() => {
   })
 })
 
-// 搜索
-const handleSearch = () => {
-  if(!searchText.value){
-    proxy.$message.warning('请输入身份证号')
-  }else{
-    qcckPost({ rysfzh: searchText.value },'/mosty-gsxt/tbYjxx/getPageAllList').then(res => {
-      peoDialogRef.value.init(res.records || [])
-    })
-  }
-}
-
-// 布控预警上图
-const getTbYjxxGetList = () => {
-  // 设置为当天时间范围：00:00:00 到 23:59:59
-  const today = new Date();
-  const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0).getTime();
-  const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59).getTime();
-  const promes = {
-    startTime:timeValidate(startTime),
-    endTime:timeValidate(endTime),
-  }
-  tbYjxxGetList(promes).then(res => {
-    const coords = res.map(item => {
-      return {
-        id: item.id,
-        jd: item.jd,
-        wd: item.wd,
-        yjtp: item.yjTp,
-        yjnr: item.yjNr,
-        yjLx: item.yjlx,
-        yjlx: '01',
-        yjsj: item.yjSj,
-        rysfzh: item.yjRysfzh,
-        ryxm: item.yjRyxm,
-      }
-    })
-    const icon = require("@/assets/point/yj.png")
-    emitter.emit('addPoint', { coords: coords, icon: icon, flag: 'yj', fontColor: '#FF0000' })
-  })
-}
-
-let timing = ref(true)
-// 情报翻转
-const reversalPushShow = ref(true)
-const reversalPush = () => {
-  reversalPushShow.value = !reversalPushShow.value
-  // 移除clearInterval调用，避免定时器被清除
-}
-// 论坛翻转
-const reversalShow = ref(true)
-const reversal= () => {
-  reversalShow.value = !reversalShow.value
-  // 移除clearInterval调用，避免定时器被清除
-}
-
-// 鼠标移入
-const mouseEnter = () => {
-  clearInterval(timing.value)
-}
-// 鼠标移出
-const mouseLeave = () => {
-  // 清除可能存在的旧定时器，避免多个定时器同时运行
-  clearInterval(timing.value)
-  // 设置为5秒自动切换，更容易测试效果
-  timing.value = setInterval(() => {
-    reversalPush()
-    reversal()
-    changeModel()
-  }, 30000)
-}
-
-function changeModel(){
-  modelWarning.value = !modelWarning.value
-}
 onUnmounted(() => {
   clearInterval(timing.value)
   clearInterval(bnTimer.value)
   clearInterval(popupTimer.value)
   // 组件卸载时停止音频播放并释放资源
-  if (audioPlayer) {
+  if (audioPlayer) audioPlayer.destroy();
-    audioPlayer.destroy()
-  }
 })
 </script>
 
@@ -569,7 +547,6 @@ onUnmounted(() => {
 .flip-wrapper {
   position: relative;
   width: 100%;
-  // height: calc(100%/3 - 8px);
   height: 100%;
   backface-visibility: hidden;
   perspective: 1000px;