From c139d1c4ecfc45bd1e2b95e23a29eec75d04db5e Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Wed, 28 May 2025 15:06:03 +0800
Subject: [PATCH] feat: 增加实况默认选中
---
src/views/Home.vue | 405 +++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 332 insertions(+), 73 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a2ab897..747f117 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -11,7 +11,7 @@
<div class="time-info-item">
<i class="el-icon-date" style="color: #FFBF00;font-size: 20px;"></i>
<div class="text-white text-[16px] ml-[4px]">工程倒计时/天</div>
- <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">175</div>
+ <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">{{endDate}}</div>
</div>
<div class="time-line">
</div>
@@ -20,45 +20,47 @@
<div class="bottom-nav">
<div class="content-wrapper mb-[20px]">
<!-- 720菜单 -->
- <div class="side-menu" v-if="currentView === '720'">
- <el-cascader popper-class="custom-dropdown" v-model="panoValue" :options="panoList" @change="handlePanoChange">
- </el-cascader>
+ <div class="side-menu z-[100]" v-if="currentView === '720'">
+ <el-cascader popper-class="custom-dropdown" v-model="panoValue" :options="panoList" @change="handlePanoChange" :props="{ value: 'id',label: 'label',children: 'Children'}"/>
</div>
-
- <!-- 主要内容区域 -->
- <div class="main-content" v-loading="isLoading">
- <!-- 模型 -->
- <div class="w-full h-full" v-if="currentView === 'model'">
- <iframe id="model-iframe" class="content-frame w-full h-full" src="" frameborder="0"></iframe>
+ <!-- 项目实况-->
+ <div class="side-menu z-[100]" v-if="currentView === 'project'">
+ <el-cascader popper-class="custom-dropdown" v-model="liveValue" :options="liveList" @change="handleLiveChange" :props="{ value: 'id',label: 'label',children: 'JSCProjectMonitorList'}"/>
</div>
- <!-- 720 -->
- <div :style="isFullScreen ? fullScreenStyle : 'width: 100%; height: 100%;'" v-if="currentView === '720'">
- <div id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''">
- </div>
+
+
+ <!-- 主要内容区域 -->
+ <div class="main-content" :style="isFullScreen ? fullScreenStyle : ''" v-loading="isLoading">
+ <!-- 模型 / 720 -->
+ <div class="w-full h-full" :style="isFullScreen ? fullScreenStyle : 'width: 100%; height: 100%;'" v-if="currentView === '720' || currentView === 'model'">
+ <iframe id="model-iframe" class="content-frame w-full h-full" src="" frameborder="0" :style="isFullScreen ? fullScreenModelStyle : ''" v-if="currentView === 'model'"></iframe>
+ <iframe ref="panoiframe" id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''" v-if="currentView === '720'"></iframe>
+ </div>
<!-- 720全景图版本选择 -->
- <div class="w-full h-[120px] bg-[rgba(19,40,64,0.8)] absolute bottom-0 left-0 right-0 flex items-center py-[10px]" :style="isFullScreen ? 'z-index: 100; height:' : ''" v-if="currentView === '720'">
+ <!--<div class="w-full h-[120px] bg-[rgba(19,40,64,0.8)] absolute bottom-0 left-0 right-0 flex items-center py-[10px]" :style="isFullScreen ? 'z-index: 100; height:' : ''" v-if="currentView === '720'">
<div v-for="item in panoVersionList" :key="item.value" :style="isFullScreen ? 'z-index: 100;' : ''">
- <div class="w-[160px] h-[100px] mr-[10px] ml-[10px] cursor-pointer border-[1px] border-[#3068A5] rounded-[2px]">
- <img :src="item.img" alt="全景图" class="w-full h-full" />
+ <div class="w-[160px] h-[100px] mr-[10px] ml-[10px] cursor-pointer border-[1px] border-[#3068A5] rounded-[2px]" @click="panoPreview(panoObj, item)">
+ <img :src="getItemImg(item)" alt="全景图" class="w-full h-full" />
</div>
</div>
- </div>
+ </div>-->
<!-- 放大镜 -->
- <div class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%]" v-if="currentView === '720'" @click="handleZoomOut">
- <img src="../assets/images/backgrounds/zoomout.png" alt="放大" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-if="isFullScreen" />
+ <div class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%] z-[100]" v-if="currentView === 'model' || currentView === '720'" @click="handleZoomOut">
+ <img src="../assets/images/backgrounds/zoomin.png" alt="放大" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-if="isFullScreen" />
<img src="../assets/images/backgrounds/zoomout.png" alt="缩小" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-else />
</div>
</div>
<!-- 项目 -->
<div class="w-full h-full" v-if="currentView === 'project'">
- <iframe id="scene-iframe" class="scene-frame w-full h-full" src="" frameborder="0"></iframe>
+ <video controls muted controlslist="nodownload" autoplay class="video-box" ref="videoElement" style="width: 100%; height: 100%; background-color: #000;"></video>
</div>
</div>
</div>
<div class="chart-content">
- <div class="w-full h-[4vh] mb-[1vh]" :style="{
+ <div
+class="w-full h-[4vh] mb-[1vh]" :style="{
backgroundImage: `url(${bottomImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
@@ -75,14 +77,34 @@
</template>
<script>
+ import flvjs from 'flv.js'
import {
nextTick
} from 'vue'
+import {
+ HomeAPI
+} from "../api/home";
+import {
+ getProjectId,
+ getToken,
+ getProjectEndDate
+} from "../utils/getToken.js";
export default {
name: 'Home',
components: {},
+ props: {
+ selectedId: {
+ type: String,
+ default: "",
+ },
+ },
data() {
return {
+ liveValue:[],
+ playerStatus: '未就绪',
+ errorMessage:'',
+ flvPlayer:null,
+ videoSrc: "",
currentView: 'model',
chartOptions: {
id: 'shigongjinduChart',
@@ -95,19 +117,11 @@
bottomImage: new URL('@/assets/images/titles/shigong.png',
import.meta.url).href,
isLoading: false,
- panoVersionList: [{
- value: '1',
- img: 'http://dev-pano.vothing.com/Panorama/bfb5597e-72cc-7f70-679c-fda46008effe/vtour/panos/7299e0b4-eac5-4c93-9d63-305fa2867f10.tiles/thumb.jpg'
- },
- {
- value: '2',
- img: 'http://dev-pano.vothing.com/Panorama/bfb5597e-72cc-7f70-679c-fda46008effe/vtour/panos/2e984554-8708-47dd-b8a0-b53e9e727ca2.tiles/thumb.jpg'
- },
-
- ],
+ panoVersionList: [],
isFullScreen: false,
fullScreenStyle: '',
fullScreenPanoStyle: '',
+ fullScreenModelStyle: '',
panoList: [{
value: 'zhinan',
label: '指南',
@@ -142,10 +156,12 @@
}],
}],
panoValue: [],
- backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png',
+ liveList: [],
+ backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png',
import.meta.url).href,
+ endDate: 0,
}
- },
+ },
computed: {
sectionStyle() {
return {
@@ -154,25 +170,86 @@
backgroundPosition: 'center center',
backgroundSize: '100% 100%'
}
+ },
+ projectId() {
+ return getProjectId()
+ },
+ projectEndDate() {
+ return getProjectEndDate()
}
},
+ watch: {
+ projectEndDate:{
+ deep: true,
+ handler (newVal) {
+ console.log('newVal', newVal)
+ const date = new Date(newVal);
+ // 获取当前日期作为Date对象
+ const now = new Date();
+ // 计算两个日期的差异（毫秒）
+ const diffTime = Math.abs(now - date);
+ // 将毫秒转换为天数
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+ this.endDate = diffDays
+ }
+ },
+ selectedId: {
+ handler(newVal) {
+ console.log("实况界面接收到的数据:", newVal);
+ // 处理数据变化的逻辑
+ this.getProjectLive(newVal);
+ },
+ deep: true, // 深度监听对象内部变化
+ immediate: true, // 立即执行一次
+ },
+ },
+ mounted() {
+ setTimeout(() => {
+ console.log('projectEndDate', getProjectEndDate())
+ this.modelShow()
+ }, 1000)
+ },
+ updated() {
+ if (this.$refs.panoiframe) {
+ // IE
+ if (this.$refs.panoiframe.attachEvent) {
+ this.$refs.panoiframe.attachEvent('onload', () => {
+ console.log('loading')
+ // 加载成功
+ this.isLoading = false;
+ });
+ } else {
+ this.$refs.panoiframe.onload = () => {
+ console.log('loading2')
+ // 加载成功
+ this.isLoading = false;
+ };
+ }
+ }
+},
methods: {
+ getItemImg (item) {
+ return `${window.ProjectConfig.panoBaseUrl}/Panorama${this.panoObj.PbUrl}/vtour/panos/${item.PsScenename}.tiles/thumb.jpg`
+ },
handleZoomOut() {
console.log('放大')
this.isFullScreen = !this.isFullScreen
if (this.isFullScreen) {
- const clientX = document.documentElement.clientWidth || document.body.clientWidth
- const clientY = document.documentElement.clientHeight || document.body.clientHeight
- this.fullScreenPanoStyle = `width: 100%; height: 100%; z-index: 100; `
- this.fullScreenStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;`
- }
+ const clientX = document.documentElement.clientWidth || document.body.clientWidth
+ const clientY = document.documentElement.clientHeight || document.body.clientHeight
+ this.fullScreenStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;`
+ if (this.currentView === '720') {
+ this.fullScreenPanoStyle = `width: 100%; height: 100%; z-index: 100; `
+ } else if(this.currentView === 'model'){
+ this.fullScreenModelStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;`
+ }
+ }
},
handleChange(view) {
this.isLoading = true
this.currentView = view
if (view === 'model') {
- removepano('krpanoSWFObject')
nextTick(() => {
this.modelShow()
})
@@ -182,57 +259,238 @@
})
} else if (view === 'project') {
nextTick(() => {
- this.sceneShow()
+ this.getProjectLive(this.selectedId)
})
}
},
handlePanoChange(value) {
console.log('value', value)
+ this.isLoading = true
+ this.panoList.forEach(item => {
+ if (item.LabelId === value[0]) {
+ item.Children.forEach(item2 => {
+ if (item2.PbGuid === value[1]) {
+ this.panoObj = item2
+ console.log('panoObj', this.panoObj)
+ this.getPanoPhase(item2)
+ }
+ })
+ }
+ })
},
modelShow() {
const iframe = document.getElementById('model-iframe')
- const token = '08168BBAD572518D1AB6EC233A13C3E2FA9C16340A21C6B6D0F2785DBDF2CB3506A0873877DA22C7E7ADA6CB1012493B4C702FC75B529ABD'
- const projectId = '1c179617-a7d9-4243-b813-84fa55a17ce7'
+ const token = getToken()
+ const projectId = this.projectId
let ifrSrc = ''
console.log('模型中查看')
- ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false`
+ // ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false`
+ ifrSrc = window.ProjectConfig.modelUrl
iframe.src = ifrSrc
console.log('加载iframe地址', ifrSrc)
this.isLoading = false
},
- panoShow(item, scene) {
- this.isLoading = false
- const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
- const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
- let setting = {}
- if (scene) {
- const scenename = 'scene_' + scene.PsScenename
- setting = {
- startscene: scenename
- }
+ panoShow() {
+ const data = {
+ projectId: this.projectId
}
- this.$nextTick(() => {
- embedpano({
- xml: xmlurl,
- target: 'panoviewpreview',
- basepath,
- vars: setting,
- html5: 'auto',
- passQueryParameters: true
- })
+ HomeAPI.GetProjectPanoramaList(data).then(res => {
+ console.log('全景图', res)
+ if (res.Ret === 1) {
+ const result = res.Data
+ if (result.length > 0) {
+ result.forEach(element => {
+ element.id = element.LabelId
+ element.label = element.LabelName
+ element.Children.forEach(item => {
+ item.id = item.PbGuid
+ item.label = item.PbName
+ });
+ });
+ this.panoList = result
+ this.panoValue = [result[0].id, result[0].Children[0].id]
+ this.panoObj = result[0].Children[0]
+ this.getPanoPhase()
+ }
+ }
})
+
+ },
+ getPanoPhase() {
+ const data = {
+ pbguid: this.panoObj.PbGuid
+ }
+ HomeAPI.GetScenesByPbGuid(data).then(res => {
+ console.log('全景图阶段', res)
+ if (res.Ret === 1) {
+ this.panoVersionList = res.Data
+ this.panoPreview(this.panoObj, this.panoVersionList[0])
+ }
+ })
+ },
+ panoPreview(item, scene) {
+ // /LinkShare/PanoShare/:PanoId/:organizeId/:StartScene
+ // PanoId：全景图的id，organizeId：项目id，StartScene:初始场景id
+ const panoFrame = document.getElementById('panoviewpreview')
+ nextTick(() => {
+ if(panoFrame.src){
+ panoFrame.removeAttribute("src"); //先移除上一次的src地址
+ }
+ setTimeout(()=>{
+ let ifrSrc = ''
+ ifrSrc = `${window.ProjectConfig.panoUrl}/#/LinkShare/PanoShare/${scene.PbGuid}/${this.projectId}/${scene.PsScenename}`
+ panoFrame.setAttribute("src",ifrSrc);
+ }, 300)
+
+ })
+ // removepano('krpanoSWFObject')
+ // const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
+ // const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
+ // let setting = {}
+ // if (scene) {
+ // const scenename = 'scene_' + scene.PsScenename
+ // setting = {
+ // startscene: scenename
+ // }
+ // }
+ // this.$nextTick(() => {
+ // embedpano({
+ // xml: xmlurl,
+ // target: 'panoviewpreview',
+ // basepath,
+ // vars: setting,
+ // html5: 'auto',
+ // passQueryParameters: true,
+ // })
+ // })
},
sceneShow() {
const iframe = document.getElementById('scene-iframe')
- const ifrSrc = window.ProjectConfig.sceneUrl
+ let ifrSrc = ''
+ ifrSrc = window.ProjectConfig.sceneUrl
iframe.src = ifrSrc
this.isLoading = false
- }
- },
- mounted() {
- this.isLoading = true
- this.modelShow()
- },
+ },
+ mounted() {
+ this.isLoading = true
+ this.modelShow()
+ },
+ /**
+ * 获取项目实况数据
+ * @param {string} bindId - 标段ID
+ */
+ getProjectLive(bindId) {
+ const params = {
+ bindId,
+ };
+ HomeAPI.GetJSCProjectMonitor(params).then(res => {
+ if (res.Ret === 1) {
+ const result = res.Data
+ if (result.length > 0) {
+ console.log('实况数据', result);
+ result.forEach(element => {
+ element.id = element.BindId
+ element.label = element.BindName
+ element.JSCProjectMonitorList.forEach(item => {
+ item.id = item.MonitorUrl
+ item.label = item.MonitorName
+ });
+ });
+ }
+ this.isLoading = false
+ this.liveList = result
+ this.liveValue = [result[0].id, result[0].JSCProjectMonitorList[0].id]
+ this.videoSrc = this.liveList[0].JSCProjectMonitorList[0].MonitorUrl
+ this.loadVideo();
+ }
+ })
+ },
+ /**
+ * 处理实况的实时变化
+ * @param value
+ */
+ handleLiveChange(value) {
+ console.log('实况变化', value);
+ this.videoSrc = value[1]
+ this.loadVideo();
+ },
+ // 检查FLV支持
+ checkFlvSupport() {
+ if (!flvjs.isSupported()) {
+ this.errorMessage = '当前浏览器不支持FLV播放'
+ this.playerStatus = '不支持'
+ return false
+ }
+ this.playerStatus = '已就绪'
+ return true
+ },
+ /**
+ * 销毁播放器实例
+ */
+ destroyPlayer() {
+ if (this.flvPlayer) {
+ try {
+ this.flvPlayer.pause()
+ this.flvPlayer.unload()
+ this.flvPlayer.detachMediaElement()
+ this.flvPlayer.destroy()
+ this.flvPlayer = null
+ } catch (error) {
+ console.error('销毁播放器时出错:', error)
+ }
+ }
+ this.isReady = false
+ },
+ /**
+ * 加载视频
+ */
+ loadVideo() {
+ if (!this.videoSrc.trim()) {
+ this.errorMessage = '请播放有效的视频URL'
+ return
+ }
+
+ if (!this.checkFlvSupport()) {
+ return
+ }
+ this.errorMessage = ''
+ this.playerStatus = '加载中...'
+
+ try {
+ // 销毁旧的播放器实例
+ this.destroyPlayer()
+
+ // 创建FLV播放器
+ this.flvPlayer = flvjs.createPlayer({
+ type: 'flv',
+ url: this.videoSrc,
+ isLive: false, // 如果是直播流，设置为true
+ cors: true,
+ withCredentials: false
+ }, {
+ enableWorker: false,
+ enableStashBuffer: true,
+ stashInitialSize: 128,
+ autoCleanupSourceBuffer: true
+ })
+
+ // 绑定事件监听器
+ // this.bindPlayerEvents()
+
+ // 绑定到video元素
+ this.flvPlayer.attachMediaElement(this.$refs.videoElement)
+
+ // 开始加载
+ this.flvPlayer.load()
+
+ } catch (error) {
+ console.error('加载视频失败:', error)
+ this.errorMessage = '视频加载失败: ' + error.message
+ this.playerStatus = '加载失败'
+ }
+ },
+ }
+
}
</script>
@@ -251,8 +509,9 @@
align-items: center;
color: white;
}
-.bottom-nav{
- flex: 1;
+
+.bottom-nav {
+ flex: 1;
}
.nav-items {
@@ -297,7 +556,7 @@
display: flex;
overflow: hidden;
position: relative;
- height: 52%;
+ height: 98%;
}
.chart-content {
--
Gitblit v1.9.3