企业详情点击显示全景处理

shuishen

2024-12-03 e68ee03553e51aa2d38327264d80d3adaf379499

企业详情点击显示全景处理

 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'


 src/components/global/panorama.vue

New file
@@ -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>

 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)

 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>