505 lines
13 KiB
Vue
505 lines
13 KiB
Vue
<template>
|
||
<div class="homeBox" style="background-color: #07274d;">
|
||
<!-- 头部 -->
|
||
|
||
<Head></Head>
|
||
<!-- 左边 -->
|
||
<div class="home-aside asideL">
|
||
<div class="asideL-top">
|
||
<DbCount></DbCount>
|
||
</div>
|
||
<div class="asideL-Bottom">
|
||
<div class="commom-aside">
|
||
<QbsbCount></QbsbCount>
|
||
</div>
|
||
<div class="commom-aside">
|
||
<!-- <KeyPpersonneltypes /> -->
|
||
<Statistics/>
|
||
</div>
|
||
<div class="commom-aside" @mouseenter="mouseEnter" @mouseleave="mouseLeave" >
|
||
<div style="position: relative; height: 100%;">
|
||
<transition name="flip" mode="out-in">
|
||
<div :key="'qb'" v-if="reversalPushShow" class="flip-wrapper">
|
||
<QblyType @reversalPush="reversalPush"></QblyType>
|
||
</div>
|
||
<div :key="'text'" v-else class="flip-wrapper">
|
||
<TextType @reversalPush="reversalPush"></TextType>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右边 -->
|
||
<div class="home-aside asideR">
|
||
<div class="commom-aside-big">
|
||
<Calendar />
|
||
</div>
|
||
<div class="commom-aside-big" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
|
||
<transition name="flip" mode="out-in">
|
||
<div :key="'qb'" v-if="reversalShow" class="flip-wrapper">
|
||
<Experience @reversalPush="reversal"></Experience>
|
||
</div>
|
||
<div :key="'text'" v-else class="flip-wrapper">
|
||
<KeyPpersonneltypes @reversalPush="reversal"></KeyPpersonneltypes>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
<div class="commom-aside-small">
|
||
<!-- <SituationAssessment /> -->
|
||
<Judgment />
|
||
</div>
|
||
</div>
|
||
<!-- 中间 -->
|
||
<div class="home-center">
|
||
<div class="middle-top">
|
||
<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">
|
||
<MuteNotification />
|
||
</el-icon>
|
||
</div>
|
||
<div style="width: 100%;border: 1px sienna;position: relative">
|
||
<GdMap></GdMap>
|
||
</div>
|
||
<div class="flex-1" style="width: 340px;position: absolute;z-index: 100;right: 0;">
|
||
<DeployControl />
|
||
</div>
|
||
<div class="flex-1" style="width: 340px;position: absolute;z-index: 100;left: 0;top: 30%;">
|
||
<GeneralWindow />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 底部 -->
|
||
<div class="home-foot-t">
|
||
<div style="width: 33%;">
|
||
<!-- <WarningDistrict></WarningDistrict> -->
|
||
<WarningPoints></WarningPoints>
|
||
</div>
|
||
<div style="width: 33%;">
|
||
<WarningLevels></WarningLevels>
|
||
</div>
|
||
<div style="width: 33%;">
|
||
<Bkcz></Bkcz>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 左边弹窗 -->
|
||
<LeftDialog></LeftDialog>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { qcckGet ,qcckPost} from "@/api/qcckApi.js";
|
||
import { ref, onMounted, onUnmounted } from 'vue'
|
||
import LeftDialog from './dialog/leftDialog'
|
||
import GdMap from "@/components/GdMap/index.vue";
|
||
import Head from './layout/head.vue'
|
||
import DbCount from './model/dbCount.vue'
|
||
import QbsbCount from './model/qbsbCount.vue'
|
||
import QblyType from './model/qblyType.vue'
|
||
import TextType from './model/textType.vue'
|
||
import Bkcz from './model/bkcz.vue'
|
||
import WarningLevels from './model/warningLevels.vue'
|
||
import Yszs from './model/yszs.vue'
|
||
import DeployControl from './model/deployControl.vue';
|
||
import Experience from './model/experience.vue'
|
||
import Calendar from './model/calendar.vue'
|
||
import KeyPpersonneltypes from './model/keyPpersonneltypes.vue'
|
||
import WarningDistrict from './model/WarningDistrict.vue'
|
||
import WarningPoints from './model/warningPoints.vue'
|
||
import { getItem, setItem } from "@/utils/storage";
|
||
import emitter from "@/utils/eventBus.js";
|
||
import { bm, centralPoint } from '@/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js'
|
||
import Judgment from './model/judgment.vue'
|
||
import { tbYjxxGetList } from '@/api/zdr.js'
|
||
import GeneralWindow from './model/generalWindow.vue'
|
||
import WebSoketClass from '@/utils/webSocket.js'
|
||
import { timeValidate } from '@/utils/tools.js'
|
||
import Statistics from './model/statistics.vue'
|
||
// 导入音频播放器工具类
|
||
import audioPlayer from '@/utils/audioPlayer'
|
||
const webSoket = new WebSoketClass()
|
||
const changeXzqh = (val, trg) => {
|
||
setTimeout(() => {
|
||
// 先移除已有的边界
|
||
emitter.emit('removeBj')
|
||
if (trg) {
|
||
console.log("多个");
|
||
// 如果传入的是多个区域数据（二维数组）
|
||
const features = val.map((area, index) => ({
|
||
geometry: {
|
||
type: "Polygon",
|
||
coordinates: [area] // 确保格式正确
|
||
},
|
||
properties: {
|
||
},
|
||
type: "Feature"
|
||
}))
|
||
// 循环为每个区域创建单独的多边形，这样可以设置不同的样式
|
||
features.forEach((feature, index) => {
|
||
emitter.emit('setBoundarys', {
|
||
data: {
|
||
type: "FeatureCollection",
|
||
features: [feature]
|
||
},
|
||
color: 'rgba(209, 112, 65, 0.8)',
|
||
fillColor: 'rgba(255, 255, 255,0)',
|
||
})
|
||
})
|
||
} else {
|
||
|
||
// 保持原来的逻辑，处理单个区域
|
||
emitter.emit('setBoundarys', {
|
||
data: {
|
||
type: "FeatureCollection",
|
||
features: [
|
||
{
|
||
geometry: {
|
||
type: "Polygon",
|
||
coordinates: [val] // 使用正确的GeoJSON格式
|
||
},
|
||
properties: {},
|
||
type: "Feature"
|
||
}
|
||
]
|
||
},
|
||
color: 'rgba(209 112 65,1)',
|
||
fillColor: 'rgba(255, 255, 255,0)',
|
||
})
|
||
}
|
||
}, 3000)
|
||
}
|
||
const getDepId = () => {
|
||
const deptId = getItem('deptId')
|
||
const deptLevel = deptId[0].deptLevel ? deptId[0].deptLevel : null
|
||
const deptCode = deptId[0].deptCode ? deptId[0].deptCode : null
|
||
if (deptLevel.startsWith('2')) {
|
||
const data = Object.values(bm).map(item => item);
|
||
changeXzqh(data, true)
|
||
} else {
|
||
switch (deptCode) {
|
||
case '54040200000'://巴宜区
|
||
changeXzqh(bm[542621])
|
||
break;
|
||
case '54042400000'://波密县
|
||
changeXzqh(bm[542625])
|
||
break;
|
||
case '54042500000'://察隅县
|
||
changeXzqh(bm[542626])
|
||
break;
|
||
case '54042100000'://工布江达县
|
||
changeXzqh(bm[542622])
|
||
break;
|
||
case '54042600000'://朗县
|
||
changeXzqh(bm[542627])
|
||
break;
|
||
case '54042200000'://米林县
|
||
changeXzqh(bm[542623])
|
||
break;
|
||
case '54042300000'://墨脱县
|
||
changeXzqh(bm[542624])
|
||
break;
|
||
default:
|
||
const data = Object.values(bm).map(item => item);
|
||
changeXzqh(data, true)
|
||
break;
|
||
}
|
||
|
||
}
|
||
}
|
||
const makerCenter = () => {
|
||
const dw = require("@/assets/point/dingwei.png")
|
||
qcckGet({},'/mosty-gsxt/tbYjxx/selectSsbm').then(res=>{
|
||
let list = res || [];
|
||
list.forEach(item => {
|
||
let obj = centralPoint.find(i => i.name == item.ssbm);
|
||
if(obj){
|
||
item.jd = obj.point[0];
|
||
item.wd = obj.point[1];
|
||
}
|
||
})
|
||
emitter.emit("addPointArea", { coords:list, icon: dw, flag: "hm", size: '14px', showTitle: false, offset: [0, -25] });
|
||
})
|
||
}
|
||
//播放音频
|
||
const ispLayBack = ref(true)
|
||
|
||
// 打开播放
|
||
const openLayBack = () => {
|
||
ispLayBack.value = true
|
||
}
|
||
|
||
// 关闭播放
|
||
const closeLayBack = () => {
|
||
ispLayBack.value = false
|
||
audioPlayer.pause()
|
||
}
|
||
|
||
// 初始化音频播放器
|
||
const initAudioPlayer = () => {
|
||
// 使用工具类初始化音频播放器
|
||
audioPlayer.init(require('@/assets/images/yjsy.mp3'))
|
||
.then(() => {
|
||
console.log('音频播放器初始化成功');
|
||
// 只有当ispLayBack为true时才播放
|
||
if (ispLayBack.value) {
|
||
audioPlayer.muted = false
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('初始化音频播放器失败:', error);
|
||
})
|
||
}
|
||
// 组件挂载时初始化音频播放器
|
||
onMounted(() => {
|
||
|
||
getDepId()
|
||
makerCenter()
|
||
mouseLeave()
|
||
getTbYjxxGetList()
|
||
// 初始化音频播放器
|
||
initAudioPlayer()
|
||
webSoket.connect()
|
||
// 监听音频播放事件，获取WebSocket消息数据
|
||
emitter.on("openYp", (newsDate) => {
|
||
// 使用工具类播放音频，自动处理静音切换
|
||
if (ispLayBack.value) {
|
||
audioPlayer.play()
|
||
.then(() => {
|
||
console.log('WebSocket触发音频播放成功');
|
||
})
|
||
.catch(error => {
|
||
console.error('WebSocket触发音频播放失败:', error);
|
||
})
|
||
const coords = {
|
||
id: newsDate.id,
|
||
jd: newsDate.jd,
|
||
wd: newsDate.wd,
|
||
yjtp: newsDate.yjTp,
|
||
yjnr: newsDate.yjNr,
|
||
yjLx: newsDate.yjlx,
|
||
yjlx: '01',
|
||
yjsj: newsDate.yjSj,
|
||
rysfzh: newsDate.yjRysfzh,
|
||
ryxm: newsDate.yjRyxm,
|
||
}
|
||
const icons = require("@/assets/point/jq.png")
|
||
emitter.emit('addPointArea', { coords: [{ jd: coords.jd, wd: coords.wd }], icon: icons, flag: 'yjs' })
|
||
emitter.emit('yjDetail', coords)
|
||
}
|
||
})
|
||
emitter.on("closeYp", () => {
|
||
audioPlayer.pause()
|
||
})
|
||
})
|
||
|
||
// 布控预警上图
|
||
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()
|
||
}, 30000)
|
||
}
|
||
onUnmounted(() => {
|
||
clearInterval(timing.value)
|
||
// 组件卸载时停止音频播放并释放资源
|
||
if (audioPlayer) {
|
||
audioPlayer.destroy()
|
||
}
|
||
// 组件卸载时关闭WebSocket连接
|
||
if (webSoket) {
|
||
webSoket.closeConnection()
|
||
}
|
||
})
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/css/homeScreen.scss";
|
||
|
||
.fxq {
|
||
border-radius: 35px;
|
||
width: 35px;
|
||
transition: transform 0.5s ease, width 0.5s ease;
|
||
background-color: rgb(1, 127, 245);
|
||
transform-origin: left center;
|
||
overflow: hidden;
|
||
margin-bottom: 10px;
|
||
|
||
.icon {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 35px;
|
||
height: 35px;
|
||
justify-content: center;
|
||
line-height: 35px;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.title {
|
||
height: 35px;
|
||
line-height: 35px;
|
||
|
||
img {
|
||
margin-left: 9.5px;
|
||
width: 16px;
|
||
margin-right: 10px;
|
||
margin-top: -3px;
|
||
vertical-align: middle;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fxq2 {
|
||
background-color: #9d88f9;
|
||
}
|
||
|
||
.fxq1:hover {
|
||
width: 120px;
|
||
}
|
||
|
||
.fxq2:hover {
|
||
width: 120px;
|
||
|
||
// background-color: red;
|
||
}
|
||
|
||
.fxq3:hover {
|
||
width: 120px;
|
||
}
|
||
|
||
::v-deep .badge-top-left .el-badge__content {
|
||
top: 0;
|
||
right: auto;
|
||
left: -10px;
|
||
transform: translateY(-50%) translateX(-50%);
|
||
}
|
||
|
||
.badge-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
max-height: 200px;
|
||
/* 默认展开的最大高度 */
|
||
min-height: 45px;
|
||
/* 确保收缩时有足够空间显示第一个图标 */
|
||
}
|
||
|
||
.badge-content:not(.expanded) {
|
||
max-height: 45px;
|
||
}
|
||
|
||
/* 收缩时只显示第一个图标，隐藏其他内容 */
|
||
.badge-content:not(.expanded)> :not(:first-child) {
|
||
opacity: 0;
|
||
max-height: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.badge-container {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.home-foot-t {
|
||
display: flex;
|
||
}
|
||
|
||
/* Vue 过渡动画 - 翻转效果 */
|
||
.flip-enter-active,
|
||
.flip-leave-active {
|
||
transition: transform 0.6s ease, opacity 0.6s ease;
|
||
transform-style: preserve-3d;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.flip-enter-from {
|
||
transform: rotateY(90deg) translateZ(0);
|
||
opacity: 0;
|
||
}
|
||
|
||
.flip-leave-to {
|
||
transform: rotateY(-90deg) translateZ(0);
|
||
opacity: 0;
|
||
}
|
||
|
||
/* 包装层样式 */
|
||
.flip-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
// height: calc(100%/3 - 8px);
|
||
height: 100%;
|
||
backface-visibility: hidden;
|
||
perspective: 1000px;
|
||
}
|
||
</style>
|