feat: 项目实况开发

Gary Gu

4 days ago e0c0c33de3eab17a123ee4ffa7210758b5b48405

feat: 项目实况开发

 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",

 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>


 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"