<template>
<div id="oneMapIndex">
<!-- 内容 -->
<div id="oneMapBody">
<!-- 顶部 -->
<div
id="oneMapHeader"
:class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
>
<!-- 标题 -->
<!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
<div id="titleFont">
{{ userStore.ZhuanTiType == 1 ? '延安市城市生命线安全运行监测系统' : '延安市海绵监测平台' }}
</div>
<!-- 标题左侧展示组件 -->
<div class="Location">
<el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
延安
</div>
<div class="Timer">
<span class="date">{{ dates }}</span>
<span class="time">{{ times }}</span>
<span class="date week">{{ weeks }}</span>
</div>
<div class="Wather"></div>
<!-- 标题右侧功能组件 -->
<router-link to="/index?type=FullScreen">
<div class="goHome header_icon"></div>
</router-link>
<div class="goUser_com header_icon" @click="toRYBox"></div>
<router-link to="/user/profile">
<div class="goClose_com header_icon"></div>
</router-link>
</div>
<!-- 地图组件 -->
<OneMap @map-click="mapClick" v-if="AllData.MapShowBol" :loadCallback="mapLoad"></OneMap>
<!-- 桥梁BIM -->
<WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
<!-- 隧道BIM -->
<Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
<!-- 降雨效果 -->
<CanvasRain v-if="showRainFlow"></CanvasRain>
<!-- 地图标注点弹窗popup -->
<PopupInfo></PopupInfo>
<!-- 动态信息 -->
<dynamicInformation
v-if="
AllData.ComShowID != 4 &&
AllData.ComShowID != 5 &&
AllData.ComShowID != 6 &&
AllData.ComShowID != 61 &&
AllData.ComShowID != 62 &&
AllData.ComShowID != 1 &&
AllData.ComShowID != 7
"
:showPanel="showPanel"
></dynamicInformation>
<!-- 左右面板展示隐藏-->
<!-- <el-tooltip effect="dark" content="显隐面板" placement="top"> -->
<img
id="ShowComVs"
:class="[showPanel ? 'ShowComVsTrue' : 'ShowComVsFalse']"
@click="showPanel = !showPanel"
:src="showPanel ? ZuoYou2 : ZuoYou1"
/>
<!-- </el-tooltip> -->
<!-- 图例 -->
<img
id="TuChengImg"
src="@/assets/images/Sponge_screen/TuCheng.png"
alt=""
@click="ShowTuCheng = !ShowTuCheng"
:class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
v-if="AllData.MapShowBol"
/>
<LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng" :showPanel="showPanel"></LayerControl>
<!-- 四色图图例 -->
<img
id="SiSeTu"
src="@/assets/images/Sponge_screen/SiSeTu.png"
:class="[showPanel ? 'SiSeTuTrue' : 'SiSeTuFalse']"
v-if="AllData.SiSeTuBol"
/>
<!-- 1:总体概览 -->
<ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
<!-- 2:智慧燃气 -->
<ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
<!-- 3:智慧排水 -->
<ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
<!-- 4:智慧桥梁 -->
<ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
<!-- 5:智慧隧道 -->
<ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
<!-- 6:智慧海绵 -->
<ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
<!-- 智慧海绵-监测分析 -->
<ZHHMJCFX
v-if="AllData.ComShowID == 61"
:isActive="AllData.ComShowID == 61 ? true : false"
:showPanel="showPanel"
></ZHHMJCFX>
<!-- 智慧海绵-建设评估 -->
<ZHHMJSPG
v-if="AllData.ComShowID == 62"
:isActive="AllData.ComShowID == 62 ? true : false"
:showPanel="showPanel"
></ZHHMJSPG>
<!-- 7:防洪排涝 -->
<ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
</div>
<!-- 底部菜单 -->
<div id="BottomMenuBox">
<Transition name="slide-fade">
<div v-show="AllData.BottmBackGroundShow" class="BottmBackGround"></div>
</Transition>
<!-- 菜单List -->
<div
class="MenuList"
:class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
v-for="(item, index) in AllData.MenuListData"
@click="MenuClick(item, index)"
v-if="BottomshowPanel"
@mouseenter="handleMouseEnter(item)"
@mouseleave="handleMouseLeave(item)"
>
<img class="MenuImg" v-if="AllData.AC_MenuIndex == item.id" :src="item.AC_icon" />
<img class="MenuImg" v-else :src="item.iocn" />
<div class="MenuFont" :class="AllData.AC_MenuIndex == item.id ? 'AC_Font' : ''">
{{ item.name }}
<!-- 二级菜单 -->
<!-- <Transition name="slide-fade2"> -->
<div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
<span
class="ErJiMenuList"
:class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
v-for="item2 in item.children"
@click.stop="ErJiMenuClick(item, item2)"
>
{{ item2.name }}
</span>
</div>
<!-- </Transition> -->
</div>
</div>
</div>
<!-- 语音组件 -->
<Voice :ComShowID="AllData.ComShowID"></Voice>
</div>
<!-- 融云弹窗 -->
<ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
<!-- 前端组件公共弹窗 -->
<el-dialog
modal-class="publicDialogVisible"
v-model="dialogConfig.visible"
:title="dialogConfig.title"
width="1400px"
:append-to-body="true"
:destroy-on-close="true"
:draggable="true"
@closed="handleClosed"
>
<DialogTabs
:dataID="dialogConfig.getSiteId"
:SiteNo="dialogConfig.SiteNo"
:comIDs="dialogConfig.comIDs"
:customComponents="dialogConfig.customData"
:RefName="dialogConfig.RefName"
></DialogTabs>
</el-dialog>
</template>
<script setup name="oneMapIndex">
import bus from '@/bus';
import request from '@/utils/request';
import { fullscreenToggel } from '@/utils/util';
import { ref, reactive, toRefs, onMounted } from 'vue';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
// 菜单的图片资源
import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
import JSPG from '@/assets/images/Sponge_screen/menu/JSPG.png';
import AC_JSPG from '@/assets/images/Sponge_screen/menu/AC_JSPG.png';
import JCFX from '@/assets/images/Sponge_screen/menu/JCFX.png';
import AC_JCFX from '@/assets/images/Sponge_screen/menu/AC_JCFX.png';
// 引用地图
import OneMap from './map/newfiberMapBox.vue';
// 引用王家坪大桥BIm
import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
// 引用隧道BIm
import Tunnel from './BIM/Tunnel.vue';
// 引用语音识别
import Voice from './../voice/recordPage/index.vue';
// 引入融云通讯录
import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
// 子系统引入
import ComZTGL from './components/ZTGL.vue'; //总体概览
import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
import ComZHPS from './components/ZHPS.vue'; //智慧排水
import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
import ComZHSD from './components/ZHSD.vue'; //智慧隧道
import ComZHHM from './components/ZHHM.vue'; //智慧海绵
import ComFHPL from './components/FHPL.vue'; //防洪排涝
import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
import dynamicInformation from '@/views/oneMap/components/dynamicInformation.vue'; //地图标注点弹窗
// 降雨效果
import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
// 图层控制面板
import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
// 前端共同弹窗
import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
// 左右滑动
import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
import xtb_img from '@/assets/newImgs/selectedLocation.png';
import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
// 公共弹窗保存的数据
import dialogTabsStore from '@/store/modules/dialogTabs';
import useImouPlayerStore from '@/store/modules/imouPlayerToken';
//
const useSocket = inject('useSocket');
const imouPlayerStore = useImouPlayerStore();
// 预警点位数组
const warningFeatures = ref([]);
watch(
() => useSocket.chatMessage.value,
(newVal, oldVal) => {
console.log('更新---------', newVal);
warningFeatures.value.push(newVal); //每次告警，加入到数组
console.log('初步获取数据--', warningFeatures.value);
// 添加告警点状态
// newVal.content.is_alarmOrder = false; // 默认没有告警 此时content返回的是对象
showAlarm(warningFeatures.value);
// bus.emit('removeMapDatas', ['warning_monitor1']);
// if (newVal.type == 'warnInfo') {
// // 地图操作
// if (!newVal.content.length) return;
// let warningFeatures = [];
// newVal.content.forEach(element => {
// if (element.location) {
// let warningFeature = turf.point(element.location.split(',').map(Number), element);
// warningFeature.properties.name = element.assessment;
// warningFeature.properties.size = 200;
// warningFeatures.push(warningFeature);
// }
// });
// let warningFeaturesGeojson = turf.featureCollection(warningFeatures);
// let key = 'warning_monitor1';
// bus.emit('getGeojsonByType', {
// type: key,
// callback: geojson => {
// if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: warningFeaturesGeojson, key: 'warning_monitor1' });
// bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
// },
// });
// let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor1')[0];
// if (warningPoint) {
// warningPoint.on('click', e => {
// let popupData = e.feature.properties;
// console.log('popupData---', '告警12.19---------', popupData);
// let data = {
// title: popupData.wranLocation,
// comIDs: ['gdpf'],
// getSiteId: popupData.id,
// };
// bus.emit('publicDialog', data);
// });
// }
// }
},
{
// immediate: true,
deep: true,
}
);
// 地图预警点位展示
const showAlarm = val => {
bus.emit('removeMapDatas', ['warning_monitor1']);
// 地图操作
if (!val.length) return;
let warningData = []; // 使用最外面定义的 warningFeatures.value 存储
val.forEach(element => {
if (element.type != 'warnInfo') return;
if (element.is_alarmOrder && element.is_alarmOrder == true) return;
if (element.content.location) {
let warningFeature = turf.point(element.content.location.split(',').map(Number), element);
warningFeature.properties.name = element.content.assessment;
warningFeature.properties.size = 200;
warningData.push(warningFeature);
}
});
let warningFeaturesGeojson = turf.featureCollection(warningData);
let key = 'warning_monitor1';
bus.emit('getGeojsonByType', {
type: key,
callback: geojson => {
if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: warningFeaturesGeojson, key: 'warning_monitor1' });
bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
},
});
let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor1')[0];
if (warningPoint) {
warningPoint.on('click', e => {
let popupData = e.feature.properties;
console.log('popupData---', '告警12.19---------', popupData);
let data = {
title: popupData.content?.wranLocation,
comIDs: ['gdpf'],
getSiteId: popupData.content?.id,
};
bus.emit('publicDialog', data);
});
}
};
const changeOnePoint = id => {
// 改变当前点位展示状态
const item = warningFeatures.value.find(item => item.id === id);
if (item) {
item.is_alarmOrder = true;
}
console.log(id, warningFeatures.value);
showAlarm(warningFeatures.value);
// 更新地图渲染
};
const useDialogTabs = dialogTabsStore();
// 时间以及天气
const timer = ref(null);
const dates = ref(null);
const weeks = ref(null);
const times = ref(null);
const weather = ref({
temperature: null,
imgNum: '',
text: '',
});
const showPanel = ref(false);
const showPanel2 = ref(false);
const ShowTuCheng = ref(false); //图层面板显隐
const AllData = reactive({
SiSeTuBol: false, //四色图图例
MapShowBol: true, //是否展示中心地图
MenuListData: [
// {
// name: "总体概览",
// iocn: ZTGL,
// AC_icon: AC_ZTGL,
// id: 1,
// Layers: ["路网", "河流水系"],
// },
// {
// name: "智慧燃气",
// iocn: ZHRQ,
// AC_icon: AC_ZHRQ,
// id: 2,
// Layers: ["干管", "主管", "干管流向", "主管流向"],
// },
// {
// name: "智慧排水",
// iocn: ZHPS,
// AC_icon: AC_ZHPS,
// id: 3,
// Layers: ["雨水管网", "污水管网"],
// },
// {
// name: "智慧海绵",
// iocn: ZHHM,
// AC_icon: AC_ZHHM,
// id: 6,
// children: [
// {
// name: "城市概览",
// id: 6,
// Layers: [],
// },
// {
// name: "监测分析",
// id: 61,
// Layers: [],
// },
// {
// name: "建设评估",
// id: 62,
// Layers: [],
// },
// ],
// },
// {
// name: "智慧桥梁",
// iocn: ZHQL,
// AC_icon: AC_ZHQL,
// id: 4,
// Layers: [],
// },
// {
// name: "智慧隧道",
// iocn: ZHSD,
// AC_icon: AC_ZHSD,
// id: 5,
// Layers: [],
// },
// {
// name: "防汛排涝",
// iocn: FXPL,
// AC_icon: AC_FXPL,
// id: 7,
// Layers: [],
// },
],
AC_MenuIndex: 1, //一级菜单选中的ID
BottmBackGroundShow: false,
RYDialog: false,
ZhuDongBoHao: false,
ErJiMenuShowID: null,
ErJiMenuCheckID: null, //二级菜单选中的ID
ComShowID: 1, //最终展示组件的ID
});
// 降雨效果
const showRainFlow = ref(false);
const BottomshowPanel = ref(true);
// 公共弹窗
const dialogConfig = reactive({
visible: false,
getSiteId: '',
SiteNo: '',
data: {},
comIDs: ['spjk'],
customData: [],
RefName: '',
title: '详情',
});
onBeforeMount(() => {
console.log('ZhuanTiType', userStore.ZhuanTiType);
if (userStore.ZhuanTiType == 1) {
// 城市生命线
AllData.MenuListData = [
{
name: '总体概览',
iocn: ZTGL,
AC_icon: AC_ZTGL,
id: 1,
moduleType: '',
Layers: ['路网', '河流水系', '三维建筑'],
},
{
name: '燃 气',
iocn: ZHRQ,
AC_icon: AC_ZHRQ,
id: 2,
moduleType: 'Gas',
Layers: ['干管', '主管', '干管流向', '主管流向', '燃气监测'],
},
{
name: '排 水',
iocn: ZHPS,
AC_icon: AC_ZHPS,
id: 3,
moduleType: 'drainage',
Layers: ['排水监测', '雨水管网流向'],
children: [
{
name: '排水分析',
id: 3,
moduleType: 'drainage',
Layers: [],
},
{
name: '防汛排涝',
id: 7,
moduleType: 'flood_drainage',
Layers: [],
},
],
},
{
name: '桥 梁',
iocn: ZHQL,
AC_icon: AC_ZHQL,
id: 4,
moduleType: 'bridge',
Layers: [],
},
{
name: '隧 道',
iocn: ZHSD,
AC_icon: AC_ZHSD,
id: 5,
moduleType: 'tunnel',
Layers: [],
},
];
} else if (userStore.ZhuanTiType == 2) {
// 海绵
AllData.MenuListData = [
{
name: '城市概览',
iocn: ZHHM,
AC_icon: AC_ZHHM,
id: 6,
},
{
name: '监测分析',
iocn: JCFX,
AC_icon: AC_JCFX,
id: 61,
},
{
name: '建设评估',
iocn: JSPG,
AC_icon: AC_JSPG,
id: 62,
},
];
}
// 默认选中展示第一个菜单
AllData.AC_MenuIndex = AllData.MenuListData[0].id;
AllData.ComShowID = AllData.MenuListData[0].id;
});
onMounted(() => {
fullscreenToggel();
AllData.BottmBackGroundShow = true;
console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
bus.emit('BottomHidden', AllData.BottmBackGroundShow);
// 降雨特征点击
bus.on('checkRainL', params => {
if (params == 1) {
showRainFlow.value = false;
} else {
showRainFlow.value = true;
}
});
// 底部隐藏
bus.on('checkBottom', params => {
if (params == 1) {
BottomshowPanel.value = false;
} else {
BottomshowPanel.value = true;
}
});
// 共同弹窗触发事件
bus.on('publicDialog', params => {
dialogConfig.getSiteId = params.getSiteId;
dialogConfig.SiteNo = params.SiteNo;
dialogConfig.RefName = params.RefName;
dialogConfig.title = params.title ?? '详情';
dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
// 打开弹窗
dialogConfig.visible = true;
});
// 共同弹窗触发事件
bus.on('publicDialog_Close', params => {
// 打开弹窗
dialogConfig.visible = false;
});
// 获取天气
getWeather();
// 获取时间
currentTime();
//initRainImage();
// 打开融云通讯录主动拨号
bus.on('OpenRY', params => {
// AllData.ZhuDongBoHao = true;
AllData.RYDialog = true;
bus.emit('showRy');
});
// 切换专题图
bus.on('ChangeZhuanTiTu', params => {
if (params.num == 1) {
// 一级
MenuClick(params.MenuData1);
} else if (params.num == 2) {
// 二级
ErJiMenuClick(params.MenuData1, params.MenuData2);
}
});
// 切换面板显示隐藏
bus.on('changeShowPanel', params => {
showPanel.value = params;
});
// 四色图图例显示隐藏
bus.on('SiSeTuBol', params => {
AllData.SiSeTuBol = params;
});
// 改变点位状态
bus.on('changeOnePointShow', data => {
changeOnePoint(data);
});
});
onBeforeUnmount(() => {
bus.off('BottomHidden');
bus.off('publicDialog');
bus.off('publicDialog_Close');
bus.off('OpenRY');
bus.off('ChangeZhuanTiTu');
bus.off('checkRainL');
bus.off('changeShowPanel');
bus.off('SiSeTuBol');
bus.off('changeOnePointShow');
});
// 菜单点击
const MenuClick = (item, index) => {
ShowTuCheng.value = false;
showRainFlow.value = false;
showPanel.value = false;
// 传递模块类型
if (item.moduleType) {
useDialogTabs.setModuleType(item.moduleType);
}
// 改变菜单选中索引
AllData.AC_MenuIndex = item.id;
// 二级也选中一级菜单默认展示的那个
AllData.ErJiMenuCheckID = item.id;
// 最终展示的组件ID
AllData.ComShowID = item.id;
// 当选择的是智慧桥梁时 将隐藏地图展示BIM
if (AllData.ComShowID == 4 || AllData.ComShowID == 5) {
AllData.MapShowBol = false;
} else {
AllData.MapShowBol = true;
// 点击菜单时隐藏所有图层
bus.emit('clearAllLayer');
// 打开默认的菜单
bus.emit('SetLayerShow', item.Layers);
}
};
// 二级菜单点击
const ErJiMenuClick = (item, item2) => {
ShowTuCheng.value = false;
showRainFlow.value = false;
AllData.SiSeTuBol = false;
console.log(22);
// 传递模块类型
if (item.moduleType) {
useDialogTabs.setModuleType(item.moduleType);
}
// 改变菜单选中索引
AllData.AC_MenuIndex = item.id;
// 二级也选中点击的那个
AllData.ErJiMenuCheckID = item2.id;
// 最终展示的组件ID
AllData.ComShowID = item2.id;
};
// 打开融云通讯录
const toRYBox = () => {
AllData.RYDialog = true;
AllData.ZhuDongBoHao = false;
bus.emit('showRy');
};
// 关闭融云通讯录弹窗
const dialogHide = val => {
if (!val) {
AllData.RYDialog = false;
AllData.ZhuDongBoHao = false;
}
};
//地图点击事件
const mapClick = async (point, properties, feature) => {
console.log('point', point);
console.log('properties', properties);
console.log('feature---', feature);
if (!feature) {
let currentZoom = newfiberMapbox.map.getZoom();
console.log('currentZoom--', currentZoom);
if (currentZoom >= 18) {
let clickPoint = turf.point(point);
let positionAddress = '';
gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
let data = await request({
url: `/bdApi//baiduservice/panorama`,
method: 'GET',
params: {
location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
fov: 180,
height: 256,
width: 512,
},
});
if (data && data.data) {
data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
}
console.log('data----', data);
gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
gcoord.transform(clickPoint, gcoord.WGS84, gcoord.GCJ02);
let regeodata = await request({
url: `/amap/v3/geocode/regeo`,
method: 'GET',
params: {
location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
key: '76eac14980622704ba95c1bf080f3b4c',
radius: 100,
extensions: 'all',
output: 'json',
},
});
if (regeodata.info === 'OK') {
console.log('坐标返地名data----', data);
positionAddress = regeodata.regeocode.formatted_address;
}
gcoord.transform(clickPoint, gcoord.GCJ02, gcoord.WGS84);
mapBoxVectorLayer.removeByIds(['clickPoint']);
mapBoxVectorLayer.addGeojsonSymbol('clickPoint', turf.featureCollection([clickPoint]), xtb_img, 0.8);
data.roadName = positionAddress;
bus.emit('popupcontent', {
popupShow: true,
point: point,
popupInfo: data,
});
} else {
mapBoxVectorLayer.removeByIds(['clickPoint']);
bus.emit('closeCesiumPopup');
}
}
if (properties) {
if (feature == 'rq_pipeline_info') {
if (!!newfiberMapbox.getLayerByName('rqLine')) {
newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
}
let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
let layer = new mapboxL7.LineLayer({
name: 'rqLine',
})
.source(rqLine)
.size(4)
.shape('line')
.texture('arrow')
.color('rgb(241, 159, 27)')
.animate({
interval: 2, // 间隔
duration: 2, // 持续时间，延时
trailLength: 3, // 流线长度
})
.style({
opacity: 1,
lineTexture: true, // 开启线的贴图功能
iconStep: 50, // 设置贴图纹理的间距
borderWidth: 0, // 默认文 0，最大有效值为 0.5
borderColor: '#fff', // 默认为 #ccc
});
newfiberMapbox.addLayer(layer);
}
// 打开王家坪摄像头
if (properties.type == 'video' && properties.name == '王家坪旧址门口') {
// type: "video"
let data = {
title: '王家坪旧址门口摄像机',
comIDs: ['Imou'],
getSiteId: '8L06A0DPAN427E1',
};
bus.emit('publicDialog', data);
return;
}
bus.emit('popupcontent', {
popupShow: true,
point: point,
popupInfo: properties,
});
}
};
// 获取当前时间
const formatTime = () => {
let date = new Date();
let year = date.getFullYear(); // 年
let month = date.getMonth() + 1; // 月
let day = date.getDate(); // 日
let hour = date.getHours(); // 时
hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
let minute = date.getMinutes(); // 分
minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
let second = date.getSeconds(); // 秒
second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
weeks.value = weekAry[date.getDay()];
dates.value = `${year}-${month}-${day}`;
times.value = `${hour}:${minute}:${second}`;
};
const currentTime = () => {
clearInterval(timer.value);
timer.value = setInterval(() => {
formatTime();
}, 500);
};
// 获取天气
const getWeather = async () => {
// let res = await getAppService();
// if (res.code == 200) {
// weather.value.temperature = res.data.tempFc;
// weather.value.imgNum = new URL(
// `/src/assets/images/weather_icon/icon__${res.data.code}.png`,
// import.meta.url
// ).href;
// }
};
// 二级菜单展示
const handleMouseEnter = item => {
AllData.ErJiMenuShowID = item.id;
};
// 二级菜单展示
const handleMouseLeave = item => {
AllData.ErJiMenuShowID = null;
};
const mapLoad = () => {
//mapBoxVectorLayer.load3DTiles();
};
// 公共弹窗关闭后事件
const handleClosed = () => {
console.log('clear all');
useDialogTabs.clear();
imouPlayerStore.clear_kit();
};
</script>
<style lang="scss" scoped>
#oneMapIndex {
width: 100%;
height: 100vh;
background: black;
position: relative;
#oneMapBody {
width: 100%;
height: 100vh;
background: rgba(255, 192, 203, 0.304);
// margin-top: -30px;
z-index: 99;
position: relative;
#oneMapHeader {
width: 100%;
height: 100px;
background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
background-size: cover;
z-index: 100;
position: absolute;
top: 0;
left: 0;
#titleFont {
width: 634px;
height: 47px;
position: absolute;
left: 50%;
margin-left: -317px;
top: 20px;
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 38px;
color: #ffffff;
line-height: 47px;
// text-shadow: 0px 2px 8px rgba(0, 83, 95, 0.9);
font-style: italic;
background: linear-gradient(0deg, aqua 0%, #ffffff 80%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.Location {
position: absolute;
top: 15px;
left: 20px;
height: 15px;
font-family: Adobe Heiti Std;
font-weight: normal;
font-size: 16px;
color: #ffffff;
line-height: 13px;
font-style: italic;
height: 18px;
line-height: 18px;
display: inline-block;
}
.Timer {
position: absolute;
top: 15px;
left: 90px;
height: 18px;
line-height: 18px;
.time {
display: inline-block;
width: auto;
font-family: Adobe Heiti Std;
font-weight: normal;
font-size: 16px;
color: #ffffff;
height: 18px;
line-height: 18px;
font-style: italic;
margin: 0 10px;
}
.date {
display: inline-block;
width: auto;
font-family: Adobe Heiti Std;
font-weight: normal;
font-size: 16px;
color: #ffffff;
height: 18px;
line-height: 18px;
font-style: italic;
}
}
.header_icon {
width: 22px;
height: 22px;
position: absolute;
top: 10px;
cursor: pointer;
}
.goHome {
background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
background-size: contain;
right: 150px;
}
.goUser_com {
background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
background-size: contain;
right: 100px;
}
.goClose_com {
background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
background-size: contain;
right: 50px;
}
}
#TuChengImg {
width: 36px;
height: 36px;
position: absolute;
right: 470px;
top: 100px;
cursor: pointer;
}
.TuChengImgTrue {
transform: translateX(460px);
transition: all 1s ease;
}
.TuChengImgFalse {
transform: translateX(0px);
transition: all 1s ease;
}
#SiSeTu {
width: 37px;
height: 126px;
position: absolute;
right: 480px;
bottom: 100px;
z-index: 90;
}
.SiSeTuTrue {
transform: translateX(480px);
transition: all 1s ease;
}
.SiSeTuFalse {
transform: translateX(10px);
transition: all 1s ease;
}
#ShowComVs {
position: absolute;
left: 0px;
top: 300px;
width: 40px;
height: 40px;
// background: #00cee0;
cursor: pointer;
}
.ShowComVsTrue {
transform: translateX(10px);
transition: all 1s ease;
}
.ShowComVsFalse {
transform: translateX(460px);
transition: all 0.8s ease;
}
}
#BottomMenuBox {
position: absolute;
bottom: 0;
width: 952px;
height: 93px;
left: 50%;
margin-left: -476px;
z-index: 999;
.BottmBackGround {
position: absolute;
bottom: 0;
width: 952px;
height: 53px;
background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
background-size: cover;
}
// 图标菜单样式 从左到右按照顺序进行设定
.MenuList {
position: absolute;
width: 156;
height: 48px;
text-align: center;
cursor: pointer;
.MenuImg {
width: 156px;
height: 48px;
position: absolute;
}
.MenuFont {
margin: 0;
padding: 0;
display: inline-block;
width: 156px;
height: 48px;
line-height: 46px;
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 20px;
color: #ffffff;
text-shadow: 0px 0px 20px #00303c;
position: relative;
box-sizing: border-box;
padding-left: 30px;
.ErJiMenuBox {
position: absolute;
bottom: 50px;
left: 4px;
font-size: 0;
line-height: 0;
text-align: center;
display: flex;
align-items: center;
width: 147px;
height: auto;
flex-direction: column;
.ErJiMenuList {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
color: #ffffff;
text-shadow: 0px 0px 20px #00303c;
height: 40px;
line-height: 40px;
display: inline-block;
margin: 5px 0;
width: 147px;
background: linear-gradient(0deg, rgba(1, 86, 126, 1) 0%, rgba(43, 123, 159, 0.8) 100%);
border-radius: 20px;
&:hover {
color: #ffd97f;
}
}
.ErJiMenuCheck {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
color: #ffd97f;
background: linear-gradient(0deg, rgba(1, 86, 126, 1) 0%, rgba(43, 123, 159, 1) 100%);
}
.ErJiMenuJT {
width: 28px;
height: 21px;
margin-bottom: 10px;
}
}
}
.AC_Font {
color: #ffd97f;
}
}
.MenuList3 {
left: 38px;
top: 26px;
}
.MenuList1 {
left: 218px;
top: 13px;
}
.MenuList0 {
left: 398px;
top: 0px;
}
.MenuList2 {
left: 578px;
top: 13px;
}
.MenuList4 {
left: 758px;
top: 26px;
}
}
}
/*
进入和离开动画可以使用不同
持续时间和速度曲线。
*/
.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateY(80px);
opacity: 0;
}
</style>
<style lang="scss">
.publicDialogVisible {
.el-dialog {
// background: rgba(14, 69, 89, 0.9);
background: rgba(13, 42, 84, 0.9);
height: 800px;
border: 1px solid rgba(21, 140, 253, 1);
.el-dialog__header {
background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
background-size: cover;
padding: 0;
height: 60px;
margin: 0;
.el-dialog__title {
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 24px;
color: #ebfeff;
height: 60px;
line-height: 60px;
margin-left: 40px;
}
}
.el-dialog__body {
width: 100%;
height: calc(100% - 60px);
}
}
}
</style>
