From e0c0c33de3eab17a123ee4ffa7210758b5b48405 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Wed, 28 May 2025 14:58:55 +0800
Subject: [PATCH] feat: 项目实况开发
---
yarn.lock | 18 ++++
package.json | 1
src/views/Home.vue | 188 +++++++++++++++++++++++++++++++++++++++++------
3 files changed, 183 insertions(+), 24 deletions(-)
diff --git a/package.json b/package.json
index 6d5e1ed..aa6a8bd 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"echarts": "^5.4.1",
"echarts-gl": "2.0.9",
"element-ui": "^2.15.12",
+ "flv.js": "^1.6.2",
"jquery": "^3.7.1",
"lib-flexible": "^0.3.2",
"lodash-es": "^4.17.21",
diff --git a/src/views/Home.vue b/src/views/Home.vue
index fc41987..203af13 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -21,11 +21,15 @@
<div class="content-wrapper mb-[20px]">
<!-- 720菜单 -->
<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'}">
- </el-cascader>
+ <el-cascader popper-class="custom-dropdown" v-model="panoValue" :options="panoList" @change="handlePanoChange" :props="{ value: 'id',label: 'label',children: 'Children'}"/>
</div>
+ <!-- 项目实况-->
+ <div class="side-menu z-[100]" v-if="currentView === 'project'">
+ <el-cascader popper-class="custom-dropdown" v-model="videoSrc" :options="liveList" @change="handleLiveChange" :props="{ value: 'id',label: 'label',children: 'JSCProjectMonitorList'}"/>
+ </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'">
@@ -49,13 +53,14 @@
</div>
<!-- 项目 -->
<div class="w-full h-full" v-if="currentView === 'project'">
- <iframe id="scene-iframe" frameborder='0' allowfullscreen class="scene-frame w-full h-full"></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',
@@ -72,6 +77,7 @@
</template>
<script>
+ import flvjs from 'flv.js'
import {
nextTick
} from 'vue'
@@ -86,8 +92,18 @@
export default {
name: 'Home',
components: {},
+ props: {
+ selectedId: {
+ type: String,
+ default: "",
+ },
+ },
data() {
return {
+ playerStatus: '未就绪',
+ errorMessage:'',
+ flvPlayer:null,
+ videoSrc: "",
currentView: 'model',
chartOptions: {
id: 'shigongjinduChart',
@@ -139,25 +155,10 @@
}],
}],
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,
- }
- },
- 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
- }
}
},
computed: {
@@ -175,6 +176,31 @@
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(() => {
@@ -232,7 +258,7 @@
})
} else if (view === 'project') {
nextTick(() => {
- this.sceneShow()
+ this.getProjectLive(this.selectedId)
})
}
},
@@ -347,8 +373,122 @@
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.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>
diff --git a/yarn.lock b/yarn.lock
index d14e6ca..fe7d6cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -679,6 +679,11 @@
resolved "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+es6-promise@^4.2.8:
+ version "4.2.8"
+ resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+ integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
esbuild@^0.16.3:
version "0.16.17"
resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.16.17.tgz#fc2c3914c57ee750635fee71b89f615f25065259"
@@ -932,6 +937,14 @@
version "3.2.7"
resolved "https://registry.npmmirror.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+
+flv.js@^1.6.2:
+ version "1.6.2"
+ resolved "https://registry.yarnpkg.com/flv.js/-/flv.js-1.6.2.tgz#fa3340fe3f7ee01d3977f7876aee66b8436e5922"
+ integrity sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==
+ dependencies:
+ es6-promise "^4.2.8"
+ webworkify-webpack "^2.1.5"
follow-redirects@^1.15.0:
version "1.15.2"
@@ -2037,6 +2050,11 @@
resolved "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+webworkify-webpack@^2.1.5:
+ version "2.1.5"
+ resolved "https://registry.yarnpkg.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz#bf4336624c0626cbe85cf1ffde157f7aa90b1d1c"
+ integrity sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==
+
which@^2.0.1:
version "2.0.2"
resolved "https://registry.npmmirror.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
--
Gitblit v1.9.3