更新
This commit is contained in:
24
src/App.vue
24
src/App.vue
@ -152,19 +152,22 @@ v-deep .el-loading-mask {
|
||||
}
|
||||
.popupCustomBox{
|
||||
position: relative;
|
||||
padding: 4px 10px;
|
||||
box-sizing: border-box;
|
||||
background: #06254282;
|
||||
background: #2a88e082;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
.popupCustomTitle_title{
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
text-transform: none;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px dashed #ececec;
|
||||
margin-bottom: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
@ -176,7 +179,18 @@ v-deep .el-loading-mask {
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 10px solid #06254282;
|
||||
border-top: 10px solid #2a88e082;
|
||||
}
|
||||
.popupCustomTitle_li{
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
text-transform: none;
|
||||
margin-bottom: 0;
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -154,6 +154,10 @@ onMounted(() => {
|
||||
emitter.on("showSquire", (obj) => {
|
||||
mapUtil.value.zdySquire(obj);
|
||||
});
|
||||
// 展示气泡框
|
||||
emitter.on("makerPopup", (obj) => {
|
||||
mapUtil.value.makerPopup(obj);
|
||||
});
|
||||
|
||||
// 绘制图形 - 回显区域
|
||||
emitter.on("drawShape", (res) => {
|
||||
@ -288,6 +292,7 @@ onUnmounted(() => {
|
||||
emitter.off("showPoint");
|
||||
emitter.off("deletePointArea");
|
||||
emitter.off("deletePointAreaOne");
|
||||
emitter.off("makerPopup");
|
||||
emitter.off("drawShape");
|
||||
emitter.off("echoPlane");
|
||||
emitter.off("removeEara");
|
||||
|
||||
@ -167,6 +167,11 @@ onMounted(() => {
|
||||
mapUtil.value.showPoint(obj);
|
||||
});
|
||||
|
||||
// 展示气泡框
|
||||
emitter.on("makerPopup", (obj) => {
|
||||
mapUtil.value.makerPopup(obj);
|
||||
});
|
||||
|
||||
// 清除覆盖物
|
||||
emitter.on("deletePointArea", (res) => {
|
||||
// 只清除与当前地图相关的覆盖物
|
||||
@ -325,6 +330,7 @@ onUnmounted(() => {
|
||||
emitter.off("setMapCenter");
|
||||
emitter.off("addPointArea");
|
||||
emitter.off("showPoint");
|
||||
emitter.off("makerPopup");
|
||||
emitter.off("deletePointArea");
|
||||
emitter.off("deletePointAreaOne");
|
||||
emitter.off("drawShape");
|
||||
|
||||
@ -85,7 +85,7 @@ export function MapUtil(map) {
|
||||
el.style.width = size ? size : "25px";
|
||||
if (flag.includes('jczMap_')) el.style.width = '45px';
|
||||
if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag, '', offset) //展示标题
|
||||
if (flag == 'hm') _that.makerPopup(item, flag, 'Custom') //展示气泡框
|
||||
// if (flag == 'hm') _that.makerPopup({data:item,flag:'hm_pop',type:'Custom'}) //展示气泡框
|
||||
// 确保坐标格式正确，使用对象格式传递坐标
|
||||
const marker = map.Marker(el, { lng: item.jd, lat: item.wd }, { anchor: 'bottom', offset: [0, 0] })
|
||||
el.addEventListener("click", () => {
|
||||
@ -144,34 +144,35 @@ export function MapUtil(map) {
|
||||
}
|
||||
|
||||
// 展示气泡框
|
||||
MapUtil.prototype.makerPopup = (item,flag,style = 'Dark')=>{
|
||||
MapUtil.prototype.makerPopup = (val)=>{
|
||||
|
||||
let { data,flag,type = 'Dark'} = val
|
||||
// Dark Light Custom
|
||||
let marker;
|
||||
let flagPop = flag+'_pop'
|
||||
if(!_that._self[flagPop]) _that._self[flagPop] = [];
|
||||
if(style == 'Dark' || style == 'Light') {
|
||||
let list = zdyContent(flag,item);// 默认的样式
|
||||
marker = map.createPopup([item.jd,item.wd],{
|
||||
if(!_that._self[flag]) _that._self[flag] = [];
|
||||
if(type == 'Dark' || type == 'Light') {
|
||||
let list = zdyContent(flag,data);// 默认的样式
|
||||
marker = map.createPopup([data.jd,data.wd],{
|
||||
style:style, // 气泡框样式:
|
||||
data:list,
|
||||
title:item.ssbm,
|
||||
title:data.ssbm,
|
||||
closeButton:false,
|
||||
anchor:'bottom',
|
||||
pixelOffset:[0,-50]
|
||||
})
|
||||
}else {
|
||||
marker = map.createPopup([item.jd,item.wd],{
|
||||
marker = map.createPopup([data.jd,data.wd],{
|
||||
style:'Custom', // // 自定义样式
|
||||
attrs:{
|
||||
class:'popupCustom'
|
||||
},
|
||||
container: zdyContentHtml(flag,item),
|
||||
container: zdyContentHtml(flag,data),
|
||||
closeButton:false,
|
||||
anchor:'bottom',
|
||||
pixelOffset:[0,-30]
|
||||
})
|
||||
}
|
||||
_that._self[flagPop].push(marker)
|
||||
_that._self[flag].push(marker)
|
||||
}
|
||||
// 弹窗自定义默认内容
|
||||
function zdyContent(flag,item){
|
||||
@ -187,16 +188,25 @@ export function MapUtil(map) {
|
||||
}
|
||||
// 弹窗自定义标签内容
|
||||
function zdyContentHtml(flag,item){
|
||||
const list = [
|
||||
{ jb: "一级",sl:'5',ypl:'100%' },
|
||||
{ jb: "一级",sl:'5',ypl:'100%' },
|
||||
{ jb: "一级",sl:'5',ypl:'100%' },
|
||||
{ jb: "一级",sl:'5',ypl:'100%' }
|
||||
];
|
||||
let html = ''
|
||||
switch (flag) {
|
||||
case 'hm':
|
||||
case 'hm_pop':
|
||||
html = `
|
||||
<div class="popupCustomBox">
|
||||
<div class="popupCustomTitle_title">${item.ssbm}</div>
|
||||
<div>林安码线索数量：${item.lamsx}</div>
|
||||
<div>布控预警数量：${item.bkyj}</div>
|
||||
<div>红色预警数量：${item.hsyj}</div>
|
||||
<div>信息采集数量：${item.xxcjsl}</div>
|
||||
<div class="popupCustomTitle_title">
|
||||
<span>${item.ssbm}</span>
|
||||
<span>今日警情${item.jqsl || 0}</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="popupCustomTitle_li"><span>级别</span> <span>数量</span> <span>研判率</span> </li>
|
||||
${list.map(it => `<li class="popupCustomTitle_li"><span>${it.jb}</span> <span>${it.sl}</span> <span>${it.ypl}</span></li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
`
|
||||
break;
|
||||
@ -797,7 +807,7 @@ export function MapUtil(map) {
|
||||
// 移除边界
|
||||
|
||||
MapUtil.prototype.createBoundarys = (res) => {
|
||||
let { data, color, fillColor, borderColor, label, text, labelPosition } = res
|
||||
let { data, color, fillColor, borderColor, label, text, labelPosition, outLineWidth } = res
|
||||
if (!data) return false;
|
||||
// 使用传入的颜色参数，如果没有则使用默认值
|
||||
const fillColorValue = fillColor || 'rgba(27, 205, 211, 0.3)';
|
||||
@ -807,7 +817,7 @@ export function MapUtil(map) {
|
||||
const polygon = map.createPolygon(data, {
|
||||
color: fillColorValue,
|
||||
outLineColor: borderColorValue,
|
||||
outLineWidth: 1,
|
||||
outLineWidth: outLineWidth || 1,
|
||||
highlightColor: highlightColorValue,
|
||||
type: 'solid',
|
||||
labelOption: {
|
||||
|
||||
@ -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