|
|
@@ -3,9 +3,34 @@
|
|
|
<div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
|
|
|
<div :class="!menuComTStyB ? 'menuComTSty' : 'menuComT'">
|
|
|
<menuCom :showbasemap="false" :showwindspeed="false" :showcloud="false" :showrainfall="false"
|
|
|
- :showtemperature="false" :showwind="false" :showexit="true" @handleInit="resetViewport"
|
|
|
- @handleExit="switchLayer" />
|
|
|
+ :showtemperature="false" :showwind="false" :showexit="true" :showwindModel="true"
|
|
|
+ @handleWindModel="showwindmodel" @handleInit="resetViewport" @handleExit="switchLayer" />
|
|
|
</div>
|
|
|
+ <el-drawer v-model="windDrawer" direction="rtl" class="windModelDrawer" :before-close="handleClose">
|
|
|
+ <template #header>
|
|
|
+ <h3 style="font-weight: bold">{{windDrawerHeader}}</h3>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <div class="windDrawerCla">
|
|
|
+ <div class="line" v-if="!showModelMsg">
|
|
|
+ <div class="leftContent"><span>{{windDrawerTitle}}</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="jcxx" v-if="showBasicMsg">
|
|
|
+ <windHome :modelValItem="modelVal" />
|
|
|
+ </div>
|
|
|
+ <div class="spjk" v-if="showVideoMsg">
|
|
|
+ <iframe src="https://www.bilibili.com/video/BV1421DYCELw?t=12.1" frameborder="0" style="width: 100%;height: 100%"></iframe>
|
|
|
+ </div>
|
|
|
+ <div class="gzck" v-if="showProblemMsg">
|
|
|
+ <windPro />
|
|
|
+ </div>
|
|
|
+ <div class="third" v-if="showModelMsg">
|
|
|
+ <ModelUnpack :modelUnpackType="modelUnpackType" :showModelMsg="showModelMsg" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- -->
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
<comModelDialog :showcomModelDia="showcomModelDia" :modelVal="modelVal" @showDia="showComDia" />
|
|
|
<windView @showDetail="menuComTSty" />
|
|
|
</div>
|
|
|
@@ -18,18 +43,33 @@ import fjLonLatJson from "./fjLonLat.json";
|
|
|
import comModelDialog from "@/components/comModelDialog.vue"
|
|
|
import windView from "./windView.vue"
|
|
|
import menuCom from "../menuCom.vue"
|
|
|
+
|
|
|
+import windHome from "@/components/windHome/index.vue"
|
|
|
+import windPro from "@/components/windProDetail/windProblem.vue"
|
|
|
+import ModelUnpack from "@/components/modelUnpack.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
comModelDialog,
|
|
|
windView,
|
|
|
- menuCom
|
|
|
+ menuCom,
|
|
|
+ windHome,
|
|
|
+ windPro,
|
|
|
+ ModelUnpack
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
viewer: null,
|
|
|
showcomModelDia: false,
|
|
|
modelVal: null,
|
|
|
- menuComTStyB: false
|
|
|
+ menuComTStyB: false,
|
|
|
+ modelUnpackType: "fengji",
|
|
|
+ windDrawer: false,
|
|
|
+ windDrawerTitle: '',
|
|
|
+ windDrawerHeader: '',
|
|
|
+ showBasicMsg: false,
|
|
|
+ showVideoMsg: false,
|
|
|
+ showProblemMsg: false,
|
|
|
+ showModelMsg: false
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -162,31 +202,201 @@ export default {
|
|
|
let that = this
|
|
|
// 创建事件处理器
|
|
|
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
|
- handler.setInputAction(function(click) {
|
|
|
- const picked = viewer.scene.pick(click.position);
|
|
|
- if (picked && picked.id === entity) {
|
|
|
+ // handler.setInputAction(function(click) {
|
|
|
+ // const picked = viewer.scene.pick(click.position);
|
|
|
+ // if (picked && picked.id === entity) {
|
|
|
+ // console.log('你点击了标签或模型！', entity);
|
|
|
+ // console.log('标签或模型数据！', val);
|
|
|
+ // // alert('你点击了: ' + entity.label.text.getValue());
|
|
|
+ // // this.$refs.comModelDialog.init(val)
|
|
|
+ // if (name !== '光伏') {
|
|
|
+ // that.showcomModelDia = true
|
|
|
+ // that.modelVal = val
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ handler.setInputAction(function(movement) {
|
|
|
+ var position = movement.position;
|
|
|
+ var pickedObject = viewer.scene.pick(position);
|
|
|
+ if (pickedObject && pickedObject.id === entity) {
|
|
|
console.log('你点击了标签或模型！', entity);
|
|
|
console.log('标签或模型数据！', val);
|
|
|
- // alert('你点击了: ' + entity.label.text.getValue());
|
|
|
- // this.$refs.comModelDialog.init(val)
|
|
|
- if (name !== '光伏') {
|
|
|
- that.showcomModelDia = true
|
|
|
- that.modelVal = val
|
|
|
- }
|
|
|
+ that.modelVal = val
|
|
|
+ // 找到实体，显示包含实体信息的弹框
|
|
|
+ that.showRightClickPopup(position, viewer);
|
|
|
+ return;
|
|
|
}
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
|
|
|
- if (entity) {
|
|
|
- handler.setInputAction(function(hover) {
|
|
|
- const picked = viewer.scene.pick(hover.endPosition);
|
|
|
- if (entity && Cesium.defined(picked) && Cesium.defined(picked.id)) {
|
|
|
- console.log('你hover了标签或模型！', entity);
|
|
|
- console.log('hover标签或模型数据！', val);
|
|
|
- }
|
|
|
- }, Cesium.ScreenSpaceEventType.TOUCH_MOVE);
|
|
|
- }
|
|
|
+ }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
|
|
|
|
},
|
|
|
+ showRightClickPopup(screenPosition, viewer) {
|
|
|
+ // 创建或获取弹框元素
|
|
|
+ var popup = document.getElementById('rightClickPopup');
|
|
|
+ if (!popup) {
|
|
|
+ popup = document.createElement('div');
|
|
|
+ popup.id = 'rightClickPopup';
|
|
|
+ popup.style.position = 'absolute';
|
|
|
+ // popup.style.backgroundColor = 'white';
|
|
|
+ popup.style.border = '1px solid rgba(255, 255, 255, 0.2)';
|
|
|
+ popup.style.borderRadius = '4px';
|
|
|
+ popup.style.padding = '10px';
|
|
|
+ popup.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
|
|
|
+ popup.style.backdropFilter = `blur(10px)`;
|
|
|
+ popup.style.zIndex = '1000';
|
|
|
+ popup.style.pointerEvents = 'auto'; // 确保弹框可交互
|
|
|
+ // 添加一个最小宽度，避免内容过短
|
|
|
+ popup.style.minWidth = '100px';
|
|
|
+ // 可选：添加箭头指向点击点
|
|
|
+ // 这需要更复杂的 CSS 或额外的 DOM 元素
|
|
|
+ document.body.appendChild(popup);
|
|
|
+ }
|
|
|
+ // <span class="popup-menu-item" data-message-type="model" style="cursor:pointer">模型解构</span>
|
|
|
+ let content = `
|
|
|
+ <div style="display: flex;gap: 10px;flex-direction: column;text-align: center;color: #fff">
|
|
|
+ <span class="popup-menu-item" data-message-type="basic" style="cursor:pointer">基本信息</span>
|
|
|
+ <span class="popup-menu-item" data-message-type="video" style="cursor:pointer">视频监控</span>
|
|
|
+ <span class="popup-menu-item" data-message-type="problem" style="cursor:pointer">故障详情</span>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+
|
|
|
+ // 设置弹框内容
|
|
|
+ popup.innerHTML = content;
|
|
|
+
|
|
|
+ // --- 关键修正：准确计算弹框位置 ---
|
|
|
+
|
|
|
+ // 1. 获取 Cesium 画布 (Canvas) 相对于视口 (viewport) 的位置
|
|
|
+ var canvas = viewer.scene.canvas;
|
|
|
+ var canvasRect = canvas.getBoundingClientRect();
|
|
|
+ // console.log('Canvas Rect:', canvasRect); // 调试用
|
|
|
+
|
|
|
+ // 2. 计算弹框左上角在页面中的绝对 X 坐标
|
|
|
+ // screenPosition.x 是相对于画布左上角的 X 偏移
|
|
|
+ // canvasRect.left 是画布左上角相对于浏览器视口左上角的 X 偏移
|
|
|
+ // window.pageXOffset 是页面水平滚动的距离
|
|
|
+ var popupLeft = canvasRect.left + screenPosition.x + window.pageXOffset;
|
|
|
+
|
|
|
+ // 3. 计算弹框左上角在页面中的绝对 Y 坐标
|
|
|
+ var popupTop = canvasRect.top + screenPosition.y + window.pageYOffset;
|
|
|
+
|
|
|
+ // --- 可选：添加偏移量，避免完全覆盖鼠标指针 ---
|
|
|
+ // 例如，向下和向右偏移 10px
|
|
|
+ var offsetX = 10;
|
|
|
+ var offsetY = 10;
|
|
|
+ popupLeft += offsetX;
|
|
|
+ popupTop += offsetY;
|
|
|
+
|
|
|
+ // --- 可选：边界检查，防止弹框超出屏幕 ---
|
|
|
+ var popupWidth = popup.offsetWidth || 150; // 确保有宽度
|
|
|
+ var popupHeight = popup.offsetHeight || 50; // 确保有高度
|
|
|
+ var windowWidth = window.innerWidth;
|
|
|
+ var windowHeight = window.innerHeight;
|
|
|
+
|
|
|
+ // 如果弹框右边会超出窗口，则左移
|
|
|
+ if (popupLeft + popupWidth > windowWidth) {
|
|
|
+ popupLeft = windowWidth - popupWidth - 10; // 靠右留 10px 边距
|
|
|
+ }
|
|
|
+ // 如果弹框底边会超出窗口，则上移
|
|
|
+ if (popupTop + popupHeight > windowHeight) {
|
|
|
+ popupTop = windowHeight - popupHeight - 10; // 靠下留 10px 边距
|
|
|
+ }
|
|
|
+ // 如果左边超出 (不太可能，但安全起见)
|
|
|
+ if (popupLeft < 0) popupLeft = 10;
|
|
|
+ // 如果顶边超出
|
|
|
+ if (popupTop < 0) popupTop = 10;
|
|
|
+
|
|
|
+ // --- 设置最终位置 ---
|
|
|
+ popup.style.left = popupLeft + 'px';
|
|
|
+ popup.style.top = popupTop + 'px';
|
|
|
+
|
|
|
+ // console.log('Popup Position:', { left: popupLeft, top: popupTop }); // 调试用
|
|
|
+
|
|
|
+ // 显示弹框
|
|
|
+ popup.style.display = 'block';
|
|
|
+
|
|
|
+ // --- 隐藏弹框的逻辑 (保持不变) ---
|
|
|
+ function hidePopup(event) {
|
|
|
+ // 检查点击是否发生在弹框内部，如果是，则不隐藏
|
|
|
+ if (event && popup.contains(event.target)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ popup.style.display = 'none';
|
|
|
+ document.removeEventListener('click', hidePopup);
|
|
|
+ document.removeEventListener('keydown', keyDownHandler);
|
|
|
+ }
|
|
|
+
|
|
|
+ function keyDownHandler(event) {
|
|
|
+ if (event.key === 'Escape') {
|
|
|
+ hidePopup();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let that = this
|
|
|
+ that.showBasicMsg = false
|
|
|
+ that.showVideoMsg = false
|
|
|
+ that.showProblemMsg = false
|
|
|
+ that.showModelMsg = false
|
|
|
+ function popupMenuItemClick(event) {
|
|
|
+ // 检查点击的是否是菜单项
|
|
|
+ if (event.target.classList.contains('popup-menu-item')) {
|
|
|
+ event.stopPropagation(); // 阻止冒泡，防止弹框立即关闭
|
|
|
+
|
|
|
+ var messageType = event.target.dataset.messageType; // 获取 data-message-type
|
|
|
+ console.log('点击了菜单项:', messageType);
|
|
|
+
|
|
|
+ // 调用您的 showMessage 函数
|
|
|
+ that.showMessage(messageType);
|
|
|
+ hidePopup()
|
|
|
+
|
|
|
+ // 可选：执行后关闭弹框
|
|
|
+ // hideRightClickPopup();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移除旧的监听器（避免重复绑定）
|
|
|
+ document.removeEventListener('click', hidePopup);
|
|
|
+ document.removeEventListener('click', popupMenuItemClick);
|
|
|
+ document.removeEventListener('keydown', keyDownHandler);
|
|
|
+
|
|
|
+ // 添加新的监听器
|
|
|
+ document.addEventListener('click', hidePopup);
|
|
|
+ document.addEventListener('click', popupMenuItemClick);
|
|
|
+ document.addEventListener('keydown', keyDownHandler);
|
|
|
+ },
|
|
|
+ showMessage(val) {
|
|
|
+ console.log('val===>>>', val)
|
|
|
+ this.windDrawer = true
|
|
|
+ this.windDrawerHeader = '各风机数据详情'
|
|
|
+ if (val === 'basic') {
|
|
|
+ this.windDrawerTitle = '基础信息'
|
|
|
+ this.showBasicMsg = true
|
|
|
+ } else if(val === 'video') {
|
|
|
+ this.windDrawerTitle = '视频监控'
|
|
|
+ this.showVideoMsg = true
|
|
|
+ } else if(val === 'problem') {
|
|
|
+ this.windDrawerTitle = '故障查看'
|
|
|
+ this.showProblemMsg = true
|
|
|
+ }
|
|
|
+ // else {
|
|
|
+ // this.windDrawerTitle = '模型解构'
|
|
|
+ // this.showModelMsg = true
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ showwindmodel() {
|
|
|
+ this.windDrawer = true
|
|
|
+ this.showBasicMsg = false
|
|
|
+ this.showVideoMsg = false
|
|
|
+ this.showProblemMsg = false
|
|
|
+ this.windDrawerHeader = '风机模型可视化解构说明'
|
|
|
+ this.showModelMsg = true
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.windDrawer = false
|
|
|
+ this.showBasicMsg = false
|
|
|
+ this.showVideoMsg = false
|
|
|
+ this.showProblemMsg = false
|
|
|
+ this.showModelMsg = false
|
|
|
+ },
|
|
|
showComDia(val) {
|
|
|
this.showcomModelDia = val
|
|
|
this.modelVal = null
|
|
|
@@ -266,7 +476,7 @@ export default {
|
|
|
},
|
|
|
menuComTSty(val) {
|
|
|
this.menuComTStyB = val
|
|
|
- }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -289,5 +499,51 @@ export default {
|
|
|
bottom: 20px;
|
|
|
left: 20px;
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.el-overlay{
|
|
|
+ .windModelDrawer{
|
|
|
+ width: 80% !important;
|
|
|
+ .el-drawer__body{
|
|
|
+ overflow: hidden;
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.windDrawerCla{
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .leftContent {
|
|
|
+ width: 242px;
|
|
|
+ height: 41px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: url("@/assets/cesiumImg/title_left_bg.png") no-repeat;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .jcxx, .gzck{
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .spjk, .third{
|
|
|
+ height: 80vh;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
sunzehao
