更新
This commit is contained in:
@ -76655,12 +76655,14 @@ export const bm = {
|
||||
export const centralPoint = [
|
||||
{
|
||||
name: '墨脱县',
|
||||
ssbmdm:'540423000000',
|
||||
point: [
|
||||
95.33050808900407,
|
||||
29.322011545645807
|
||||
]
|
||||
}, {
|
||||
name: '巴宜区',
|
||||
ssbmdm:'540402000000',
|
||||
point: [
|
||||
94.36040092147607,
|
||||
29.637028970765996
|
||||
@ -76668,30 +76670,35 @@ export const centralPoint = [
|
||||
},
|
||||
{
|
||||
name: '波密县',
|
||||
ssbmdm:'540424000000',
|
||||
point: [
|
||||
95.7692249914358,
|
||||
29.85943760031867
|
||||
]
|
||||
}, {
|
||||
name: '察隅县',
|
||||
ssbmdm:'540425000000',
|
||||
point: [
|
||||
97.46698612723947,
|
||||
28.661228694163327
|
||||
]
|
||||
}, {
|
||||
name: '工布江达县',
|
||||
ssbmdm:'540421000000',
|
||||
point: [
|
||||
93.24660931130188,
|
||||
29.88459424127838
|
||||
]
|
||||
}, {
|
||||
name: '朗县',
|
||||
ssbmdm:'540426000000',
|
||||
point: [
|
||||
93.07449497318652,
|
||||
29.045416229209337
|
||||
]
|
||||
}, {
|
||||
name: '米林县',
|
||||
ssbmdm:'540422000000',
|
||||
point: [
|
||||
94.21305189935441,
|
||||
29.21583429482142
|
||||
|
||||
446
src/views/home/index copy.vue
Normal file
446
src/views/home/index copy.vue
Normal file
@ -0,0 +1,446 @@
|
||||
<template>
|
||||
<div class="homeBox" style="background-color: #07274d;">
|
||||
<!-- 头部 -->
|
||||
|
||||
<Head></Head>
|
||||
<!-- 左边 -->
|
||||
|
||||
<!-- 右边 -->
|
||||
|
||||
<!-- 中间 -->
|
||||
<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: 30px;position: absolute;z-index: 100;left: 34px;background-color: #07274d;height: 30px;text-align: center;line-height:30px;">
|
||||
<el-tooltip class="item" effect="dark" :content="showNotification ? '通知关闭' : '通知打开'" placement="bottom">
|
||||
<el-icon :size="20" @click="showNotification = !showNotification" style="top: 3px;">
|
||||
<Open v-if="showNotification" />
|
||||
<TurnOff v-else />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</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>
|
||||
|
||||
</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 BkWarning from './model/bkWarning.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 modelWarning = ref(true)
|
||||
const changeXzqh = (val, trg) => {
|
||||
setTimeout(() => {
|
||||
// 先移除已有的边界
|
||||
emitter.emit('removeBj')
|
||||
if (trg) {
|
||||
// 如果传入的是多个区域数据（二维数组）
|
||||
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)',
|
||||
outLineWidth: 2,
|
||||
})
|
||||
})
|
||||
} 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 indexNum = ref(0) //当前展示的气泡框
|
||||
const showNotification = ref(false) //是否自动展开提示
|
||||
const makerCenter = () => {
|
||||
const dw = require("@/assets/point/dingwei.png")
|
||||
qcckGet({},'/mosty-gsxt/tbYjxx/selectSsbm').then(res=>{
|
||||
emitter.emit('deletePointArea','hm')
|
||||
emitter.emit('deletePointArea','hm_pop')
|
||||
let list = res || [];
|
||||
list.forEach(item => {
|
||||
let obj = centralPoint.find(i => i.name == item.ssbm || i.ssbmdm == item.ssbmdm);
|
||||
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] });
|
||||
if(!showNotification.value){
|
||||
setTimeout(() => {
|
||||
// 没有主动展开提示，默认循环一个一个展示
|
||||
if(list.length > 0){
|
||||
emitter.emit("makerPopup", { data:list[indexNum.value], flag: "hm_pop",type:'Custom'});
|
||||
indexNum.value == list.length ? indexNum.value = 0 : indexNum.value++
|
||||
}
|
||||
}, 1000);
|
||||
}else{
|
||||
// 主动展开提示，默认展示所有
|
||||
}
|
||||
})
|
||||
}
|
||||
//播放音频
|
||||
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);
|
||||
})
|
||||
}
|
||||
const bnTimer = ref(null)
|
||||
|
||||
|
||||
// 组件挂载时初始化音频播放器
|
||||
onMounted(() => {
|
||||
getDepId()
|
||||
makerCenter()
|
||||
bnTimer.value = setInterval(()=>{
|
||||
// makerCenter()
|
||||
},10000)
|
||||
|
||||
})
|
||||
|
||||
// 布控预警上图
|
||||
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)
|
||||
}
|
||||
|
||||
function changeModel(){
|
||||
modelWarning.value = !modelWarning.value
|
||||
}
|
||||
onUnmounted(() => {
|
||||
clearInterval(timing.value)
|
||||
clearInterval(bnTimer.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>
|
||||
@ -56,8 +56,7 @@
|
||||
<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;">
|
||||
<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>
|
||||
@ -65,6 +64,14 @@
|
||||
<MuteNotification />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div style="width: 30px;position: absolute;z-index: 100;left: 34px;background-color: #07274d;height: 30px;text-align: center;line-height:30px;">
|
||||
<el-tooltip class="item" effect="dark" :content="showNotification ? '通知关闭' : '通知打开'" placement="bottom">
|
||||
<el-icon :size="20" @click="handleOpenNotification" style="top: 3px;">
|
||||
<Open v-if="showNotification" />
|
||||
<TurnOff v-else />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div style="width: 100%;border: 1px sienna;position: relative">
|
||||
<GdMap></GdMap>
|
||||
</div>
|
||||
@ -142,15 +149,13 @@ const changeXzqh = (val, trg) => {
|
||||
// 先移除已有的边界
|
||||
emitter.emit('removeBj')
|
||||
if (trg) {
|
||||
console.log("多个");
|
||||
// 如果传入的是多个区域数据（二维数组）
|
||||
const features = val.map((area, index) => ({
|
||||
geometry: {
|
||||
type: "Polygon",
|
||||
coordinates: [area] // 确保格式正确
|
||||
},
|
||||
properties: {
|
||||
},
|
||||
properties: { },
|
||||
type: "Feature"
|
||||
}))
|
||||
// 循环为每个区域创建单独的多边形，这样可以设置不同的样式
|
||||
@ -162,6 +167,7 @@ const changeXzqh = (val, trg) => {
|
||||
},
|
||||
color: 'rgba(209, 112, 65, 0.8)',
|
||||
fillColor: 'rgba(255, 255, 255,0)',
|
||||
outLineWidth: 2,
|
||||
})
|
||||
})
|
||||
} else {
|
||||
@ -222,24 +228,46 @@ const getDepId = () => {
|
||||
changeXzqh(data, true)
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const indexNum = ref(0) //当前展示的气泡框
|
||||
const showNotification = ref(false) //是否自动展开提示
|
||||
const allDep = ref([]) //所有部门
|
||||
const handleOpenNotification = () => {
|
||||
showNotification.value = !showNotification.value;
|
||||
emitter.emit('deletePointArea','hm_pop')
|
||||
if(showNotification.value){
|
||||
// 主动展开提示，默认展示所有
|
||||
allDep.value.forEach(item => {
|
||||
emitter.emit("makerPopup", { data:item, flag: "hm_pop",type:'Custom'});
|
||||
})
|
||||
}
|
||||
}
|
||||
const makerCenter = () => {
|
||||
const dw = require("@/assets/point/dingwei.png")
|
||||
qcckGet({},'/mosty-gsxt/tbYjxx/selectSsbm').then(res=>{
|
||||
emitter.emit('deletePointArea','hm')
|
||||
emitter.emit('deletePointArea','hm_pop')
|
||||
if(!showNotification.value) emitter.emit('deletePointArea','hm_pop')
|
||||
let list = res || [];
|
||||
list.forEach(item => {
|
||||
let obj = centralPoint.find(i => i.name == item.ssbm);
|
||||
let obj = centralPoint.find(i => i.name == item.ssbm || i.ssbmdm == item.ssbmdm);
|
||||
if(obj){
|
||||
item.jd = obj.point[0];
|
||||
item.wd = obj.point[1];
|
||||
}
|
||||
})
|
||||
allDep.value = list;
|
||||
emitter.emit("addPointArea", { coords:list, icon: dw, flag: "hm", size: '14px', showTitle: false, offset: [0, -25] });
|
||||
if(!showNotification.value){
|
||||
setTimeout(() => {
|
||||
// 没有主动展开提示，默认循环一个一个展示
|
||||
if(list.length > 0){
|
||||
emitter.emit("makerPopup", { data:list[indexNum.value], flag: "hm_pop",type:'Custom'});
|
||||
indexNum.value == list.length ? indexNum.value = 0 : indexNum.value++
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
}
|
||||
//播放音频
|
||||
|
||||
Reference in New Issue
Block a user