fix: 功能实现

pages.json

@@ -788,6 +788,13 @@
       }
     },
     {
+      "path": "pages/monitor/dgpImagelist",
+      "style": {
+        "navigationBarTitleText": "光谱图片列表",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
       "path": "pages/cb/sy/detail",
       "style": {
         "navigationBarTitleText": "设备详情",

pages/monitor/dgpImagelist.vue

@@ -0,0 +1,457 @@
+<template>
+  <view>
+    <view class="" style="position: relative; top: 5px">
+      <!-- <view style="position: fixed;z-index: 100;">
+				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="查看图片"></uni-nav-bar>
+			</view> -->
+      <p class="tishi" v-if="tishi">暂无数据</p>
+	<view style="position: fixed; z-index: 100;">
+		
+	
+	  <view class="tab-box">
+	  	<u-tabs :list="equipArr"  :current="active" active-color="#14A478" @change="tabClick"></u-tabs>
+	  </view>
+	  <view class="selecttimes" @click="tiemshow = !tiemshow">
+	    <view class="timesbox">
+	      <image
+	        :src="
+	          $imageURL+ '/bigdata_app' +
+	          '/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'
+	        "
+	        mode=""
+	      ></image>
+	      <p>{{ timetab(timestate) }}</p>
+	      <p class="or">~</p>
+	      <p>{{ timetab(timeend) }}</p>
+	      <u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon>
+	    </view>
+	    <u-calendar
+	      v-model="tiemshow"
+	      mode="range"
+	      @change="tiemchange"
+	    ></u-calendar>
+	  </view>
+	  </view>
+      <view class="imglist">
+        <view
+          class="imglist_box"
+          v-for="(item, index) in imglists"
+          :key="index"
+        >
+          <view class="imglist_left">
+            <image
+              :src="
+                $imageURL+ '/bigdata_app' +
+                '/image/cb/jiazai.ui.gif'
+              "
+              mode=""
+            >
+            </image>
+            <image :src="item.photo" mode="" @click="examine(item.photo)"></image>
+          </view>
+          <view class="imglist_right">
+            <view class="icon_box" @click="delimg(item.photo_id)">
+              <i class="yficonfont icon-shanchu"></i>
+            </view>
+			<p>设备名称：{{ item.device_name  }}</p>
+			<p>所属场景：{{ item.index_name  }}</p>
+			<p>类型：{{ item.index_type  }}</p>
+			<p>指数：{{ item.index_value  }}</p>
+            <p >{{ item.addtime | timeFormat() }}</p>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="top" v-if="isTop" @click="top">
+      <image
+        :src="
+          $imageURL+ '/bigdata_app' +
+          '/image/6209a98f0cb3b5086f2ca36152c9269.png'
+        "
+        mode=""
+      ></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      page: 1,
+      imglists: [],
+      tishi: true,
+      d_id: '',
+      timeend: '', //当前时间 也是搜索的结束时间
+      timestate: '',
+      timeshow: false,
+      params: {
+        year: true,
+        month: true,
+        day: true,
+        hour: true,
+        minute: true,
+        second: false,
+      },
+      flag: 1,
+      self: true,
+      isTop: false,
+      resultdata: {},
+      titletext: ['24小时', '近一个月', '近半年', '近一年'],
+      titleidnex: 0,
+      tiemshow: false, //时间选择器
+      disable: '',
+      device_type: '',
+      myuid: '',
+	  active:0,
+	  equipArr:[
+		          { name: '全部', value: '全部' },
+		        { name: 'NDVI（归一化差值植被指数）', value: 'NDVI' },
+		             { name: 'GNDVI（绿度归一化差值植被指数）', value: 'GNDVI' },
+		             { name: 'OSAVI（优化土壤调节植被指数）', value: 'OSAVI' },
+		             { name: 'LCI（叶叶绿素指数）', value: 'LCI' },
+		             { name: 'NDRE（红边归一化差值植被指数）', value: 'NDRE' }
+	  ],
+	  device_type:''
+    };
+  },
+  methods: {
+	  examine(url) {
+	  				var imgarr =[]
+	  				imgarr.push(url)
+	  				console.log(imgarr)
+	  				uni.previewImage({
+	  					urls: imgarr
+	  				});
+	  			},
+    	tabClick(index) {
+			this.page = 1
+    				this.imglists = []
+    				this.active = index;
+    				this.device_type = this.equipArr[index].value
+
+    				    if (this.timestate != '') {
+    				      this.timestate = parseInt(this.timestate);
+    				    }
+    				    if (this.timeend != '') {
+    				      this.timeend = parseInt(this.timeend);
+    				    }
+    				    this.imglistdata(this.timestate, this.timeend);
+    			},
+    async imglistdata(time_begin, time_end) {
+      //获取图片列表
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=camera.camera_manage.multi_camera_photo',
+        data: {
+          device_id: this.device_id,
+          page: this.page,
+          page_size: 8,
+          start: time_begin, //开始时间
+          end: time_end, //结束时间
+		  index_type: this.device_type === '全部' ? '' : this.device_type
+        },
+      });
+      this.imglists = this.imglists.concat(res.data);
+      console.log(this.imglists);
+      if (this.imglists.length == 0) {
+        this.tishi = true;
+      } else {
+        this.tishi = false;
+      }
+    },
+    //forecast.forecast_system.equip_photo_del
+    async del(id) {
+      //删除图片
+      const res = await this.$myRequest({
+        url: '/api/api_gateway?method=camera.camera_manage.multi_camera_photo_delete',
+        data: {
+          // device_id: this.device_id,
+          photo_id: id,
+        },
+      });
+      if (res) {
+        uni.showToast({
+          title: '删除成功！',
+          duration: 2000,
+        });
+        this.page = 1;
+        this.imglists = [];
+        if (this.timestate != '') {
+          this.timestate = parseInt(this.timestate);
+        }
+        if (this.timeend != '') {
+          this.timeend = parseInt(this.timeend);
+        }
+        this.imglistdata(this.timestate, this.timeend);
+      } else {
+        uni.showToast({
+          title: '删除失败！',
+          duration: 2000,
+          icon: 'none',
+        });
+      }
+    },
+    //forecast.forecast_system.equip_photo_species  pest_list
+    //forecast.forecast_system.equip_photo_species统计
+
+    //forecast.send_control.admin_device_control 拍照
+    clickLeft() {
+      uni.navigateBack({
+        delta: 1,
+      });
+    },
+    delimg(id) {
+      //删除图片
+      uni.showModal({
+        title: '提示',
+        content: '是否删除此图片？',
+        success: (res) => {
+          if (res.confirm) {
+            this.del(id);
+            console.log('用户点击确定');
+          } else if (res.cancel) {
+            console.log('用户点击取消');
+          }
+        },
+      });
+    },
+    top() {
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 500,
+      });
+    },
+    tiemchange(e) {
+      this.imglists = [];
+      this.page = 1;
+      console.log(e);
+      this.timestate = +new Date(e.startDate) / 1000 - 8 * 60 * 60;
+      this.timeend = +new Date(e.endDate) / 1000 + 16 * 60 * 60;
+      this.imglistdata(parseInt(this.timestate), parseInt(this.timeend));
+    },
+    timetab(e) {
+      if (!e) return '请选择';
+      e = new Date(e * 1000);
+      var year = e.getFullYear();
+      var month =
+        e.getMonth() + 1 < 10 ? '0' + (e.getMonth() + 1) : e.getMonth() + 1;
+      var day = e.getDate() < 10 ? '0' + e.getDate() : e.getDate();
+      var time = year + '/' + month + '/' + day;
+      return time;
+    },
+  },
+  onLoad(option) {
+    uni.getStorage({
+      key: 'myuid',
+      success: (res) => {
+        this.myuid = res.data;
+        console.log(this.myuid);
+      },
+    });
+    // this.timeend = +new Date() / 1000
+    // this.timestate = this.timeend - 60 * 60 * 24
+    console.log(option);
+    this.device_id = option.id;
+    console.log(this.timestate);
+    this.imglistdata('', '');
+  },
+  onShow() {},
+  onReachBottom() {
+    this.page++;
+    console.log(this.timestate);
+    if (this.timestate != '') {
+      this.timestate = parseInt(this.timestate);
+    }
+    if (this.timeend != '') {
+      this.timeend = parseInt(this.timeend);
+    }
+    this.imglistdata(this.timestate, this.timeend);
+  },
+  onPageScroll(e) {
+    //nvue暂不支持滚动监听，可用bindingx代替
+    if (e.scrollTop > 200) {
+      //距离大于200时显示
+      this.isTop = true;
+    } else {
+      //距离小于200时隐藏
+      this.isTop = false;
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.tishi {
+  position: absolute;
+  top: 45%;
+  width: 95%;
+  left: 2.5%;
+  text-align: center;
+  font-size: 40rpx;
+}
+
+.selecttimes {
+  width: 100%;
+  // position: fixed;
+  // top: 0;
+  // left: 0;
+  z-index: 100;
+  background-color: #fff;
+  padding: 10rpx 20rpx;
+ box-sizing: border-box;
+  .timesbox {
+    display: flex;
+    width:100%;
+    margin: 0 auto;
+    justify-content: space-around;
+    box-shadow: 0 0 10rpx #bcb9ca;
+    padding: 10rpx 20rpx;
+    box-sizing: border-box;
+
+    image {
+      width: 30rpx;
+      height: 30rpx;
+      margin-top: 6rpx;
+    }
+
+    .icon {
+      color: #949494;
+      text-align: right;
+      margin-left: 30rpx;
+    }
+  }
+
+  ::v-deep .u-calendar__action {
+    display: flex;
+    justify-content: space-around;
+
+    .u-calendar__action__text {
+      line-height: 25px;
+    }
+  }
+}
+
+.timeshow {
+  width: 96%;
+  height: 50rpx;
+  background-color: #ffffff;
+  position: fixed;
+  top: 10px;
+  left: 2.5%;
+  display: flex;
+  z-index: 100;
+  padding-top: 10px;
+
+  .shuju_one_title {
+    width: 70%;
+    margin: 0 auto;
+    display: flex;
+
+    .tltle_text {
+      width: 25%;
+      border: 2rpx solid #b2b2b2;
+      color: #b2b2b2;
+      text-align: center;
+      font-size: 24rpx;
+      height: 50rpx;
+      line-height: 50rpx;
+    }
+
+    .title_text_color {
+      width: 25%;
+      border: 2rpx solid #28ae4f;
+      color: #28ae4f;
+      text-align: center;
+      font-size: 24rpx;
+      height: 50rpx;
+      line-height: 50rpx;
+    }
+  }
+
+  .timeshow_tate,
+  .timeshow_end {
+    height: 50rpx;
+    width: 45%;
+    line-height: 50rpx;
+    text-align: center;
+    margin-right: 10rpx;
+    background-color: #56c877;
+    color: #ffffff;
+  }
+}
+
+.imglist {
+  position: absolute;
+  top: 95px;
+	width: 100%;
+	padding: 0 20rpx;
+	
+	box-sizing: border-box;
+  .imglist_box {
+    display: flex;
+    box-shadow: 0 0 10rpx #bcb9ca;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    height: 140px;
+  }
+
+  .imglist_left {
+    width: 50%;
+    position: relative;
+
+    image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .imglist_right {
+    margin-left: 40rpx;
+    padding-top: 26rpx;
+	position: relative;
+	p{
+		line-height: 24px;
+	}
+    .icon_box {
+		position: absolute;
+		top: -12rpx;
+		right: -42rpx;
+      // margin-bottom: 12rpx;
+		font-size: 24rpx;
+
+      .yficonfont {
+        margin-right: 20rpx;
+        color: #ff5951;
+        font-size: 32rpx;
+      }
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.top {
+  position: fixed;
+  right: 30px;
+  bottom: 100px;
+  z-index: 100;
+
+  image {
+    width: 100rpx;
+    height: 100rpx;
+  }
+}
+	.tab-box {
+		font-size: 30rpx;
+		line-height: 80rpx;
+		background-color: #ffffff;
+		width: 100vw;
+		z-index: 2;
+		margin-top: -10rpx;		
+	}
+</style>

pages/webviewdgp.vue

@@ -18,7 +18,7 @@
 			this.device_id = options.device_id
 			this.accessToken = options.accessToken
 			// this.url = "http://8.136.98.49/#/recognition"
-			this.url = "/static/h52dgp.html?device_id=" + this.device_id + "&accessToken=" + this.accessToken
+			this.url = "/static/h52dgp.html?device_id=" + this.device_id + "&accessToken=" + this.accessToken + "&videoType=dgp"
 			// uni.setStorage({
 			// 	key: 'obj',
 			// 	data: JSON.stringify({

static/h52dgp.html

@@ -148,10 +148,6 @@
 				margin-right: 2px;
 				margin-bottom: 3px;
 			}
-
-			.imgBtnDgp {
-				display: none;
-			}
 		</style>
 	</head>
 	<body>
@@ -206,7 +202,7 @@
 	<script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script>
 	<script type="module">
 		import Player from './videoPlayer/videoPlay-js.js'
-		
+		const host = "http://218.28.198.186:10508"
 		// 检测HLS支持
 		function checkHLSSupport() {
 			const video = document.createElement('video');
@@ -225,14 +221,72 @@
 				const script = document.createElement('script');
 				script.src = 'https://cdn.jsdelivr.net/npm/hls.js@latest';
 				script.onload = () => {
-					console.log('HLS.js加载完成');
+					console.log('HLS.js加载完成，版本:', window.Hls.version);
 					resolve();
 				};
-				script.onerror = reject;
+				script.onerror = () => {
+					console.error('HLS.js加载失败');
+					reject(new Error('HLS.js加载失败'));
+				};
 				document.head.appendChild(script);
 			});
 		}
 		
+		// 尝试使用HLS.js播放
+		function tryHLSJSPlayer(videoSrc) {
+			if (!window.Hls) {
+				console.error('HLS.js未加载');
+				return false;
+			}
+			
+			if (!Hls.isSupported()) {
+				console.error('浏览器不支持HLS.js');
+				return false;
+			}
+			
+			const video = document.getElementById('myPlayer');
+			if (!video) {
+				console.error('视频元素不存在');
+				return false;
+			}
+			
+			const hls = new Hls({
+				debug: true,
+				enableWorker: true,
+				lowLatencyMode: true
+			});
+			
+			hls.loadSource(videoSrc);
+			hls.attachMedia(video);
+			
+			hls.on(Hls.Events.MANIFEST_PARSED, function() {
+				console.log('HLS.js: 清单解析完成');
+				video.play().catch(e => {
+					console.error('HLS.js播放失败:', e);
+					showError('HLS.js播放失败: ' + e.message);
+				});
+			});
+			
+			hls.on(Hls.Events.ERROR, function(event, data) {
+				console.error('HLS.js错误:', event, data);
+				if (data.fatal) {
+					switch(data.type) {
+						case Hls.ErrorTypes.NETWORK_ERROR:
+							showError('网络错误，无法加载视频流');
+							break;
+						case Hls.ErrorTypes.MEDIA_ERROR:
+							showError('媒体错误，视频格式可能不支持');
+							break;
+						default:
+							showError('HLS播放器致命错误');
+							break;
+					}
+				}
+			});
+			
+			return true;
+		}
+		
 		let player = null
 		let stopTimer = 0
 		
@@ -326,7 +380,7 @@
 			
 			return $.ajax({
 				type: "POST",
-				url: "http://47.110.79.22:9000/api/api_gateway?method=device.device_manage.get_device_info",
+				url: `${host}/api/api_gateway?method=device.device_manage.get_device_info`,
 				data: {
 					device_id: device_id,
 					token: token
@@ -382,9 +436,9 @@
 				} else {
 
 					$('#dialog').html('拍照指令正在下发，请等待...').stop().show(50)
-					let url = "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.camera_takephoto"
+					let url =`${host}/api/api_gateway?method=camera.camera_manage.camera_takephoto`
 					if (videoType == 'dgp') {
-						url = "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.multi_camera_takephoto"
+						url = `${host}/api/api_gateway?method=camera.camera_manage.multi_camera_takephoto`
 					}
 					$.ajax({
 						type: "POST",
@@ -404,13 +458,13 @@
 				}
 
 			} else {
-				let url = "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.ctrl_camera"
+				let url = `${host}/api/api_gateway?method=camera.camera_manage.ctrl_camera`
 				let postData = {
 					device_id: device_id,
 					token
 				}
 				if (videoType == 'dgp') {
-					url = "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.multi_ctrl_camera"
+					url = `${host}/api/api_gateway?method=camera.camera_manage.multi_ctrl_camera`
 					postData.ctrl = movenum
 				} else {
 					postData.ctrl = ctrl
@@ -434,7 +488,7 @@
 				stopTimer = setTimeout(()=>{
 					$.ajax({
 						type: "POST",
-						url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.mulit_stop_move",
+						url: `${host}/api/api_gateway?method=camera.camera_manage.mulit_stop_move`,
 						data: {
 							device_id: device_id,
 							token
@@ -445,7 +499,7 @@
 			} else {
 				$.ajax({
 					type: "POST",
-					url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.ctrl_camera",
+					url: `${host}/api/api_gateway?method=camera.camera_manage.ctrl_camera`,
 					data: {
 						device_id: device_id,
 						ctrl: "stop",
@@ -462,7 +516,7 @@
 			form.append('token', token)
 			$.ajax({
 				type: "POST",
-				url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.save_camera_photo",
+				url: `${host}/api/api_gateway?method=camera.camera_manage.save_camera_photo`,
 				contentType: false,
 				processData: false,
 				data: form
@@ -528,7 +582,7 @@
 				if (videoType == 'dgp') {
 					$.ajax({
 						type: "POST",
-						url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
+						url: `${host}/api/api_gateway?method=camera.camera_manage.multi_addr_camera`,
 						data: {
 							device_id: device_id,
 							token
@@ -569,82 +623,146 @@
 					
 					const hlsHdSrc = videoSource.source;
 					
-					var playHtml =
-						`<video id="myPlayer" poster='' controls playsInline webkit-playsinline style="width:100%; height:100%;"></video>`;
-					$("#box").html(playHtml)
-					
-					var myVideo = videojs(`myPlayer`, {
-						controls: true,
-						autoplay: false,
-						preload: 'metadata',
-						sources: [{
-							type: videoSource.type === 'rtmp' ? 'rtmp/flv' : 'application/x-mpegURL',
-							src: hlsHdSrc,
-						}],
-						html5: {
-							hls: {
-								enableLowInitialPlaylist: true,
-								smoothQualityChange: true,
-								overrideNative: true
-							}
-						}
-					}, function onPlayerReady() {
-						console.log('DGP播放器准备完成');
-						// 延迟播放，确保源加载完成
-						setTimeout(() => {
-							myVideo.play().catch(e => {
-								console.error('DGP播放失败:', e);
-								showError('DGP视频播放失败: ' + e.message);
-							});
-						}, 500);
-					});
-					
-					// 添加错误处理
-					myVideo.on('error', function(e) {
-						console.error('DGP Video.js错误:', e, myVideo.error());
-						const error = myVideo.error();
-						let errorMsg = 'DGP视频播放出错';
+					// 根据视频源类型选择合适的播放器
+					if (videoSource.type === 'rtmp') {
+						// RTMP流使用Flash播放器或转换为HLS
+						console.log('检测到RTMP流，尝试使用备用播放方案');
 						
-						if (error) {
-							switch(error.code) {
-								case 1:
-									errorMsg = 'DGP视频加载被中止';
-									break;
-								case 2:
-									errorMsg = 'DGP网络错误导致视频下载失败';
-									break;
-								case 3:
-									errorMsg = 'DGP视频解码失败';
-									break;
-								case 4:
-									errorMsg = 'DGP视频格式不支持或视频源无效';
-									break;
-								default:
-									errorMsg = 'DGP未知播放错误';
-							}
+						// 尝试查找HLS备用源
+						const hlsBackup = getAvailableVideoSource(data, 'hls');
+						if (hlsBackup.source) {
+							console.log('使用HLS备用源:', hlsBackup.source);
+							createVideoJSPlayer(hlsBackup.source, 'application/x-mpegURL');
+						} else {
+							// 如果没有HLS源，显示RTMP不支持的提示
+							showError('当前设备使用RTMP流，浏览器不支持直接播放。请联系管理员配置HLS流。');
 						}
-						
-						showError(errorMsg);
-					});
-					
-					myVideo.on('play', function() {
-						console.log('DGP开始播放')
-					});
-					
-					myVideo.on('loadstart', function() {
-						console.log('DGP开始加载视频');
-					});
-					
-					myVideo.on('canplay', function() {
-						console.log('DGP视频可以播放');
+					} else {
+						// HLS/其他格式使用Video.js
+						const mimeType = videoSource.type === 'hls' || videoSource.type === 'hlsHd' 
+							? 'application/x-mpegURL' 
+							: 'video/mp4';
+						createVideoJSPlayer(hlsHdSrc, mimeType);
+					}
+				}).catch((error) => {
+					console.error('DGP视频请求失败:', error);
+					showError('DGP网络请求失败: ' + (error.message || '请检查网络连接'));
+				});
+		
+		// 创建Video.js播放器的通用函数
+		function createVideoJSPlayer(videoSrc, mimeType) {
+			console.log('创建播放器，源:', videoSrc, '类型:', mimeType);
+			
+			var playHtml =
+				`<video id="myPlayer" poster='' controls playsInline webkit-playsinline style="width:100%; height:100%;"></video>`;
+			$("#box").html(playHtml)
+			
+			// 如果是HLS格式且HLS.js可用，优先使用HLS.js
+			if (mimeType === 'application/x-mpegURL' && window.Hls && Hls.isSupported()) {
+				console.log('使用HLS.js播放器');
+				if (tryHLSJSPlayer(videoSrc)) {
+					return; // HLS.js成功初始化
+				}
+			}
+			
+			// 使用Video.js作为fallback
+			console.log('使用Video.js播放器');
+			var myVideo = videojs(`myPlayer`, {
+				controls: true,
+				autoplay: false,
+				preload: 'metadata',
+				sources: [{
+					type: mimeType,
+					src: videoSrc,
+				}],
+				html5: {
+					hls: {
+						enableLowInitialPlaylist: true,
+						smoothQualityChange: true,
+						overrideNative: false // 让HLS.js处理
+					}
+				}
+			}, function onPlayerReady() {
+				console.log('Video.js播放器准备完成');
+				// 延迟播放，确保源加载完成
+				setTimeout(() => {
+					myVideo.play().catch(e => {
+						console.error('Video.js播放失败:', e);
+						showError('视频播放失败: ' + e.message);
 					});
-				})
+				}, 1000);
+			});
+			
+			// 添加错误处理
+			myVideo.on('error', function(e) {
+				console.error('Video.js错误:', e, myVideo.error());
+				const error = myVideo.error();
+				let errorMsg = '视频播放出错';
+				
+				if (error) {
+					switch(error.code) {
+						case 1:
+							errorMsg = '视频加载被中止';
+							break;
+						case 2:
+							errorMsg = '网络错误导致视频下载失败，请检查网络连接';
+							break;
+						case 3:
+							errorMsg = '视频解码失败，可能是格式不支持';
+							break;
+						case 4:
+							errorMsg = '视频格式不支持。源: ' + videoSrc + ' 类型: ' + mimeType;
+							// 如果Video.js失败，尝试原生播放器
+							console.log('Video.js失败，尝试原生播放器');
+							tryNativePlayer(videoSrc);
+							return;
+						default:
+							errorMsg = '未知播放错误 (错误码: ' + error.code + ')';
+					}
+				}
+				
+				showError(errorMsg);
+			});
+			
+			myVideo.on('play', function() {
+				console.log('Video.js开始播放')
+			});
+			
+			myVideo.on('loadstart', function() {
+				console.log('Video.js开始加载视频');
+			});
+			
+			myVideo.on('canplay', function() {
+				console.log('Video.js视频可以播放');
+			});
+			
+			myVideo.on('loadedmetadata', function() {
+				console.log('Video.js视频元数据加载完成');
+			});
+		}
+		
+		// 尝试原生播放器
+		function tryNativePlayer(videoSrc) {
+			console.log('尝试原生播放器');
+			var playHtml = `<video id="nativePlayer" controls playsInline webkit-playsinline style="width:100%; height:100%;" src="${videoSrc}"></video>`;
+			$("#box").html(playHtml);
+			
+			const video = document.getElementById('nativePlayer');
+			video.addEventListener('error', function(e) {
+				console.error('原生播放器也失败了:', e);
+				showError('所有播放器都无法播放此视频源，请联系管理员检查视频流配置');
+			});
+			
+			video.addEventListener('canplay', function() {
+				console.log('原生播放器可以播放');
+			});
+		}
 
 			} else {
 				$.ajax({
 					type: "POST",
 					// url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
-					url: "http://192.168.1.107:8000/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
+					url: `${host}/api/api_gateway?method=camera.camera_manage.multi_addr_camera`,
 					data: {
 						device_id: device_id,
 						token
@@ -685,102 +803,22 @@
 							initYunlianPlayer(data.rtsp)
 
 						} else {
-							let hlsHdSrc = data.type_id == 0 ? data.hls : data.hlsHd;
-							
-							console.log('选择的视频源字段:', data.type_id == 0 ? 'hls' : 'hlsHd');
-							console.log('视频源值:', hlsHdSrc);
-							
-							// 如果主要源无效，尝试备用源
-							if (!hlsHdSrc || hlsHdSrc === 'undefined' || hlsHdSrc === '') {
-								console.warn('主要视频源无效，尝试备用源');
-								hlsHdSrc = data.hls || data.hlsHd || data.rtmp || data.rtsp;
-								console.log('备用视频源:', hlsHdSrc);
-							}
+							// 获取可用的视频源
+							const videoSource = getAvailableVideoSource(data, data.type_id == 0 ? 'hls' : 'hlsHd');
 							
-							// 验证视频源
-							if (!hlsHdSrc || hlsHdSrc === 'undefined' || hlsHdSrc === '') {
-								console.error('所有视频源都无效:', {
-									hls: data.hls,
-									hlsHd: data.hlsHd,
-									rtmp: data.rtmp,
-									rtsp: data.rtsp
-								});
-								showError('视频源获取失败，请检查设备是否在线或联系管理员');
+							if (!videoSource.source) {
+								console.error('没有找到可用的视频源');
+								showError('设备可能离线或未配置视频流，请检查设备状态');
 								return;
 							}
 							
-							console.log('视频源:', hlsHdSrc);
-							
-							var playHtml =
-								`<video id="myPlayer" poster='' controls playsInline webkit-playsinline style="width:100%; height:100%;"></video>`;
-							$("#box").html(playHtml)
-							
-							var myVideo = videojs(`myPlayer`, {
-								controls: true,
-								autoplay: false,
-								preload: 'metadata',
-								sources: [{
-									type: 'application/x-mpegURL',
-									src: hlsHdSrc,
-								}],
-								html5: {
-									hls: {
-										enableLowInitialPlaylist: true,
-										smoothQualityChange: true,
-										overrideNative: true
-									}
-								}
-							}, function onPlayerReady() {
-								console.log('播放器准备完成');
-								setTimeout(() => {
-									myVideo.play().catch(e => {
-										console.error('播放失败:', e);
-										$('#dialog').html('视频播放失败: ' + e.message).stop().show(500).delay(3000).hide(500);
-										$('.videoBtnPlay').show();
-									});
-								}, 500);
-							});
-							
-							// 添加错误处理
-							myVideo.on('error', function(e) {
-								console.error('Video.js错误:', e, myVideo.error());
-								const error = myVideo.error();
-								let errorMsg = '视频播放出错';
-								
-								if (error) {
-									switch(error.code) {
-										case 1:
-											errorMsg = '视频加载被中止';
-											break;
-										case 2:
-											errorMsg = '网络错误导致视频下载失败';
-											break;
-										case 3:
-											errorMsg = '视频解码失败';
-											break;
-										case 4:
-											errorMsg = '视频格式不支持或视频源无效';
-											break;
-										default:
-											errorMsg = '未知播放错误';
-									}
-								}
-								
-								$('#dialog').html(errorMsg).stop().show(500).delay(3000).hide(500);
-								$('.videoBtnPlay').show();
-							});
-							
-							myVideo.on('play', function() {
-								console.log('开始播放')
-							});
-							
-							myVideo.on('loadstart', function() {
-								console.log('开始加载视频');
-							});
+							console.log(`使用${videoSource.type}视频源:`, videoSource.source);
 							
-							myVideo.on('canplay', function() {
-								console.log('视频可以播放');
-							});
+							// 使用通用播放器创建函数
+							const mimeType = videoSource.type === 'hls' || videoSource.type === 'hlsHd' 
+								? 'application/x-mpegURL' 
+								: 'video/mp4';
+							createVideoJSPlayer(videoSource.source, mimeType);
 						}
 
 					} else {

util/api.js

@@ -8,8 +8,8 @@ export const myRequest = (options) => {
     //   process.env.NODE_ENV === 'development'
     //     ? 'https://uat.hnyfwlw.com'
     //     : 'http://8.136.98.49:8002';
-    BASE_URL = 'http://192.168.1.107:8000'
-    // BASE_URL = 'http://218.28.198.186:10508';
+    // BASE_URL = 'http://192.168.1.107:8000'
+    BASE_URL = 'http://218.28.198.186:10508';
   }
   // BASE_URL = config.productAPI;
   // BASE_URL = config.developAPI;