From e68ee03553e51aa2d38327264d80d3adaf379499 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 03 Dec 2024 00:22:33 +0800
Subject: [PATCH] 企业详情点击显示全景处理
---
src/components/global/MapContainer.vue | 6 +-
src/main.js | 4 +
src/views/companyInfo/components/box/fireTrend.vue | 33 ++++++++++++++++
src/components/global/panorama.vue | 77 ++++++++++++++++++++++++++++++++++++++
4 files changed, 115 insertions(+), 5 deletions(-)
diff --git a/src/components/global/MapContainer.vue b/src/components/global/MapContainer.vue
index 8372b0b..60f5182 100644
--- a/src/components/global/MapContainer.vue
+++ b/src/components/global/MapContainer.vue
@@ -17,13 +17,13 @@
</template>
<script setup>
+import { useMap } from 'store/map'
+import { nextTick, onMounted, onUnmounted } from 'vue'
+import * as turf from '@turf/turf'
window.$viewer = null
window.$Cesium = null
window.$turf = null
const { VITE_APP_BASE } = import.meta.env
-import { useMap } from 'store/map'
-import { nextTick, onMounted, onUnmounted } from 'vue'
-import * as turf from '@turf/turf'
// import * as Cesium from 'cesium'
// import 'cesium/Build/Cesium/Widgets/widgets.css'
diff --git a/src/components/global/panorama.vue b/src/components/global/panorama.vue
new file mode 100644
index 0000000..992b18b
--- /dev/null
+++ b/src/components/global/panorama.vue
@@ -0,0 +1,77 @@
+<template>
+ <div class="panorama-container">
+ <div class="title">
+ <div>{{ title }}</div>
+ <div class="close cursor-p" @click="$emit('closePanoramaPopup')">
+ <i class="fa fa-close"></i>
+ </div>
+ </div>
+ <div class="content">
+ <iframe class="w100 h100" :src="url" frameborder="0"></iframe>
+ </div>
+ </div>
+</template>
+
+
+<script setup>
+const {
+ title,
+ url
+} = defineProps({
+ title: {
+ default: ''
+ },
+ url: {
+ default: ''
+ }
+})
+
+</script>
+
+<script>
+export default {
+ name: 'panorama'
+}
+</script>
+
+<style lang="scss" scoped>
+.panorama-container {
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 999;
+ background: transparent;
+ /* fallback for old browsers */
+ // background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff);
+ /* Chrome 10-25, Safari 5.1-6 */
+ // background: linear-gradient(to right, #3a7bd5, #00d2ff);
+ background-color: rgba($color: #000000, $alpha: 1.0);
+ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ pointer-events: auto;
+ box-shadow: inset 0 0 200px #0377eb;
+
+ .title {
+ padding: 0 10px;
+ display: flex;
+ justify-content: space-between;
+ height: 44px;
+ line-height: 44px;
+ color: #fff;
+
+ .close {
+ cursor: pointer;
+ }
+ }
+
+ .content {
+ padding: 0 10px 10px;
+ width: 100%;
+ height: 0;
+ flex: 1;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 6591134..15c9d32 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2024-10-25 10:56:27
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-12-01 00:28:09
+ * @LastEditTime: 2024-12-03 00:20:21
* @FilePath: \bigScreen\src\main.js
* @Description:
*
@@ -28,6 +28,7 @@
import publicBox from 'components/global/publicBox.vue'
import TitleBox from 'components/global/TitleBox.vue'
import publicContent from 'components/global/publicContent.vue'
+import panorama from 'components/global/panorama.vue'
import { getElementLabelLine } from 'element-tree-line'
import 'element-tree-line/dist/style.css'
@@ -48,6 +49,7 @@
app.component('publicBox', publicBox)
app.component('TitleBox', TitleBox)
app.component('publicContent', publicContent)
+app.component('panorama', panorama)
app.use(router)
app.use(ElementPlus)
diff --git a/src/views/companyInfo/components/box/fireTrend.vue b/src/views/companyInfo/components/box/fireTrend.vue
index 3f49081..8d44366 100644
--- a/src/views/companyInfo/components/box/fireTrend.vue
+++ b/src/views/companyInfo/components/box/fireTrend.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2023-03-13 14:54:26
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-12-02 21:23:17
+ * @LastEditTime: 2024-12-03 00:22:00
* @FilePath: \bigScreen\src\views\companyInfo\components\box\fireTrend.vue
* @Description:
*
@@ -17,6 +17,9 @@
let image = ref(VITE_APP_BASE + 'img/mapicon/yjwz.png')
+const panoramaShow = ref(false)
+const panoramaTitle = ref('')
+const panoramaUrl = ref('')
const TableContent = ref(null)
const curTableHeight = ref(0)
const loading = ref(false)
@@ -122,6 +125,27 @@
divIcon.attrParams = row
let incident = (e) => {
const { attrParams } = e.overlay
+
+ console.log(attrParams, 894654)
+
+
+ if (
+ attrParams.panoramicUrl && attrParams.panoramicUrl.length > 0 &&
+ attrParams.panoramicUrl.indexOf("http://vr.jxpskj.com:180") != -1
+ ) {
+ let panoramicUrl = attrParams.panoramicUrl.replace(
+ "http://vr.jxpskj.com:180",
+ "/panorama"
+ )
+
+ panoramaTitle.value = attrParams.name
+ panoramaUrl.value = panoramicUrl
+ panoramaShow.value = true
+
+ return
+ }
+
+
// 删除
destroyPupoLayers()
if (picList.value.length == 0) {
@@ -180,6 +204,10 @@
addPupoLayers = null
})
import { Search, Refresh } from '@element-plus/icons-vue'
+
+const closePanoramaPopup = () => {
+ panoramaShow.value = false
+}
</script>
<template>
@@ -209,6 +237,9 @@
</el-table-column> -->
</el-table>
</div>
+
+ <panorama v-show="panoramaShow" :title="panoramaTitle" :url="panoramaUrl" @closePanoramaPopup="closePanoramaPopup">
+ </panorama>
</div>
</template>
--
Gitblit v1.9.3