修改直播

修改bug
2023-11-23 15:00:25 +08:00 · 2023-11-23 14:26:00 +08:00 · 2023-11-22 21:20:53 +08:00
15 changed files with 196 additions and 13 deletions
--- a/.env.production
+++ b/.env.production
@ -1,4 +1,4 @@
 ENV = 'production'

-VUE_APP_BASE_API = 'http://36.133.205.221:81'
+VUE_APP_BASE_API = 'https://lcny-api.peidikeji.cn'

--- a/package.json
+++ b/package.json
@ -72,7 +72,9 @@
    "core-js": "^3.6.5",
    "flv.js": "^1.6.2",
    "flyio": "^0.6.2",
+    "hls.js": "^1.4.12",
    "lodash-es": "^4.17.21",
+    "mui-player": "^1.8.1",
    "portal-vue": "^2.1.7",
    "node-sass": "^6.0.1",
    "sass-loader": "^13.3.2",
--- a/src/App.vue
+++ b/src/App.vue
@ -664,4 +664,15 @@ uni-page-body {
    pointer-events: none;
  }
 }
+
+.right-part {
+  .full-switch {
+    display: none;
+  }
+}
+.left-part{
+  .live-mode{
+    display: none;
+  }
+}
 </style>
--- a/src/components/live-video/index.vue
+++ b/src/components/live-video/index.vue
@ -0,0 +1,97 @@
+<template>
+  <view class="h-full w-full">
+    <div ref="muiPlayer"></div>
+  </view>
+</template>
+<script>
+import 'mui-player/dist/mui-player.min.css'
+import MuiPlayer from 'mui-player'
+import Flv from 'flv.js'
+import Hls from 'hls.js'
+export default {
+  props: {
+    url: {
+      type: String,
+      default: null,
+    },
+    type: {
+      type: String,
+    },
+  },
+  mounted() {
+    this.videoPlayer()
+  },
+  methods: {
+    videoPlayer() {
+      let parse = {}
+      if (this.type == 'm3u8') {
+        parse = {
+          type: 'hls',
+          loader: Hls,
+          config: {
+            debug: false,
+          },
+        }
+      } else {
+        parse = {
+          type: 'flv',
+          loader: Flv,
+          config: {
+            debug: false,
+          },
+        }
+      }
+      this.mp = new MuiPlayer({
+        container: this.$refs.muiPlayer,
+        live: true,
+        src: this.url,
+        autoplay: true,
+        muted: true,
+        parse: parse,
+        pageHead: false,
+        width: '100%',
+        height: '100%',
+        autoFit:false,
+        objectFit: 'contain',
+        videoAttribute: [
+          {
+            attrKey: 'webkit-playsinline',
+            attrValue: 'webkit-playsinline',
+          },
+          {
+            attrKey: 'playsinline',
+            attrValue: 'playsinline',
+          },
+          {
+            attrKey: 'x5-video-player-type',
+            attrValue: 'h5-page',
+          },
+        ],
+        custom: {
+          footerControls: [
+            {
+              style: {},
+            },
+          ],
+        },
+      })
+      let _video = this.mp.video()
+    
+      this.$nextTick(() => {
+        this.mp.on('ready', (event) => {
+          _video.play()
+          _video.addEventListener('play', (e) => {
+            //播放事件
+            this.$emit('onPlayFn')
+          })
+          _video.addEventListener('ended', (e) => {
+            //播放完成事件
+            this.$emit('onEndedFn')
+          })
+        })
+      })
+    },
+  },
+}
+</script>
+<style lang="scss"></style>
--- a/src/components/video-flv-h5/video-flv-h5.vue
+++ b/src/components/video-flv-h5/video-flv-h5.vue
@ -49,7 +49,8 @@ export default {
 		player.x5VideoPlayerType='h5-page'
 		player.x5VideoPlayerFullscreen="false"
 		player.autoplay= true // 以上均为 video标签的属性配置
-		player.style = 'width: 100%;height:100%';
+    // player.poster = 'https://img.yzcdn.cn/vant/cat.jpeg'
+		player.style = 'width: 100%;height:100%;object-fit:cover;';
        let videoElement = this.$refs.myPlayer;
 		
 		// console.log(videoElement,'videoPlayer=========')
--- a/src/components/video-m3u8-h5/video-m3u8-h5.vue
+++ b/src/components/video-m3u8-h5/video-m3u8-h5.vue
@ -32,12 +32,15 @@ export default {
    initVideo() {
      let video = document.createElement('video')
      video.id = this.id
-      video.style = 'width: 100%; height: 100%;'
+      video.style = 'width: 100%; height: 100%;object-fit:cover;'
      video.controls = true
      video.preload = 'auto'
+      video.setAttribute('x5-playsinline', 'true')
+      video.setAttribute('x-webkit-airplay', 'allow')
      video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
      video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全zhi屏播放的video标签的一个属性
      video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
+      // video.setAttribute('poster', 'https://img.yzcdn.cn/vant/cat.jpeg')
      let source = document.createElement('source')
      source.src = this.url
      video.appendChild(source)
--- a/src/pages/basics/components/basics-edit.vue
+++ b/src/pages/basics/components/basics-edit.vue
@ -10,6 +10,9 @@
            <u-form-item label="外部链接">
              <u-switch v-model="form.is_blank"></u-switch>
            </u-form-item>
+            <u-form-item label="重点">
+              <u-switch v-model="form.extends.priority"></u-switch>
+            </u-form-item>
            <u-form-item label="外部链接" v-if="form.is_blank">
              <u-input v-model="form.blank_url" placeholder="请输入"></u-input>
            </u-form-item>
@ -155,6 +158,7 @@ export default {
        description: '',
        address_lng: '',
        address_lat: '',
+        extends:{}
      },
    }
  },
--- a/src/pages/estate/estate-materiels.vue
+++ b/src/pages/estate/estate-materiels.vue
@ -523,7 +523,7 @@
 							this.queryDataList(true);
 							
 						}
-						uni.showToast({ title: data.message, icon: 'none' });
+						uni.showToast({ title: '修改成功', icon: 'none' });
 					})
 					.catch(({data}) => {
            hideLoading()
@ -536,7 +536,7 @@
 						if(data.code==200){
 							this.queryDataList(true);
 							this.editShow = false;
-							uni.showToast({ title: data.message, icon: 'none' });
+							uni.showToast({ title: '保存成功', icon: 'none' });
 						}else{
 							uni.showToast({ title: data.message, icon: 'none' });
 						}
--- a/src/pages/index/components/pests-chart.vue
+++ b/src/pages/index/components/pests-chart.vue
@ -9,6 +9,7 @@
    <view class="h-80vh flex-center">
      <view class="w-full">
        <qiun-data-charts
+          :loadingType="loadingType"
          type="column"
          :opts="opts"
          :chartData="chartData"
@ -29,6 +30,7 @@ export default {
  },
  data() {
    return {
+      loadingType: 1,
      filterParmas: {},
      searchFormSchema: [
        {
@ -218,6 +220,7 @@ export default {
    async getData() {
      if (!this.filterParmas.device_id) {
        this.$u.toast('没有关联基地')
+        this.loadingType = 0
        return (this.chartData = { series: [] })
      }
      try {
--- a/src/pages/index/insecticidal-lamp.vue
+++ b/src/pages/index/insecticidal-lamp.vue
@ -17,7 +17,7 @@
        <div class="p-20rpx text-32rpx">
          {{ item.lable }}
        </div>
-        <qiun-data-charts type="area" :opts="opts" :chartData="item.chatOpt" />
+        <qiun-data-charts :loadingType="loadingType" type="area" :opts="opts" :chartData="item.chatOpt" />
      </view>
    </view>
  </view>
@ -67,6 +67,7 @@ export default {
  },
  data() {
    return {
+      loadingType:1,
      filterParmas: {},
      searchFormSchema: [
        {
@ -191,6 +192,7 @@ export default {
    async getData() {
      this.chatList = []
      if (!this.filterParmas.device_id){
+        this.loadingType = 0
        return this.$u.toast('没有关联基地')
      }
      const { data } = await http.get('/api/monitoring-data', {
--- a/src/pages/index/meteorological.vue
+++ b/src/pages/index/meteorological.vue
@ -43,6 +43,7 @@
 			  </view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					:loadingType="loadingType"
 					type="area"
 					:opts="optsc"
 					:chartData="chart_air_temperature"
@ -57,6 +58,7 @@
 				</view>
 				<view class="cart_box">
 				  <qiun-data-charts
+					:loadingType="loadingType"
 					type="area"
 					:opts="opts"
 					:chartData="chart_air_humidity"
@ -71,6 +73,7 @@
 				</view>
 				<view class="cart_box">
 				  <qiun-data-charts
+					:loadingType="loadingType"
 					type="mix"
 					:opts="opts2"
 					:chartData="chart_illumination"
@ -85,6 +88,7 @@
 			   </view>
 			   <view class="cart_box">
 				  <qiun-data-charts
+					:loadingType="loadingType"
 					type="mix"
 					:opts="opts2"
 					:chartData="chart_rainfall"
@ -99,6 +103,7 @@
 				</view>
 				<view class="cart_box">
 				  <qiun-data-charts
+					:loadingType="loadingType"
 					type="area"
 					:opts="opts3"
 					:chartData="chart_wind_speed"
@ -113,6 +118,7 @@
 			  </view>
 			  <view class="cart_box">	
 				 <qiun-data-charts
+				 :loadingType="loadingType"
 					type="mix"
 					:opts="opts4"
 					:chartData="chart_wind_direction"
@ -127,6 +133,7 @@
 			   </view>
 			   <view class="cart_box">
 				 <qiun-data-charts
+				 :loadingType="loadingType"
 					type="area"
 					:opts="opts3"
 					:chartData="chart_noise"
@ -141,6 +148,7 @@
 			   </view>
 			   <view class="cart_box">
 				 <qiun-data-charts
+				 :loadingType="loadingType"
 					type="area"
 					:opts="opts3"
 					:chartData="chart_pm10"
@ -155,6 +163,7 @@
 			   </view>
 			   <view class="cart_box">
 				 <qiun-data-charts
+				 :loadingType="loadingType"
 					type="area"
 					:opts="opts3"
 					:chartData="chart_pm25"
@ -169,6 +178,7 @@
 			   </view>
 			   <view class="cart_box">
 				 <qiun-data-charts
+				 :loadingType="loadingType"
 					type="area"
 					:opts="opts3"
 					:chartData="chart_co2"
@ -187,6 +197,7 @@
 		components: { QiunDataCharts },
 		data() {
 			return {
+				loadingType:1,
 				optsc:{},
 				opts: {
 					dataLabel:false,//显示数据
@ -403,6 +414,7 @@
 					if(data.code==200){
 						let _data = data.data;
 						if(_data.length==0){
+							this.loadingType = 0
 							return this.$u.toast('没有关联基地');
 						}
 						for(let item of _data){
--- a/src/pages/index/monitor.vue
+++ b/src/pages/index/monitor.vue
@ -138,8 +138,10 @@
        <view class="video_li" v-for="(video, index) in videoList" :key="index">
          <view class="video_cd">
            <!-- #ifdef H5 -->
-						<videoM3u8H5 v-if="video.video_type=='m3u8'" :url="video.video_url" :id="`m_${index}_refsM3u8`"></videoM3u8H5>
-            <video-flv-h5 v-else :url="video.video_url"></video-flv-h5>
+            <!-- {{ video.video_url }} -->
+            <LiveVideo :url="video.video_url" :type="video.video_type"></LiveVideo>
+						<!-- <videoM3u8H5 v-if="video.video_type=='m3u8'" :url="video.video_url" :id="`m_${index}_refsM3u8`"></videoM3u8H5>
+            <video-flv-h5 v-else :url="video.video_url"></video-flv-h5> -->
            <!-- #endif -->
          </view>
          <view class="bottom-box">
@ -166,8 +168,9 @@
        >
          <view class="video_cd">
            <!-- #ifdef H5 -->
-						<videoM3u8H5  v-if="video.video_type=='m3u8'" :url="video.video_url"  :id="`m_${index}_refsM3u82`" ></videoM3u8H5>
-            <video-flv-h5 v-else :url="video.video_url"></video-flv-h5>
+            <LiveVideo :url="video.video_url" :type="video.video_type"></LiveVideo>
+						<!-- <videoM3u8H5  v-if="video.video_type=='m3u8'" :url="video.video_url"  :id="`m_${index}_refsM3u82`" ></videoM3u8H5>
+            <video-flv-h5 v-else :url="video.video_url"></video-flv-h5> -->
            <!-- #endif -->
          </view>
          <view class="bottom-box">
@ -200,10 +203,11 @@
 <script>
 import videoFlvH5 from '@/components/video-flv-h5/video-flv-h5.vue'
 import videoM3u8H5 from '@/components/video-m3u8-h5/video-m3u8-h5.vue'
+import LiveVideo from '@/components/live-video/index.vue'
 import Request from '@/api/luch-request/index.js'
 const http = new Request()
 export default {
-  components: { videoFlvH5,videoM3u8H5 },
+  components: { videoFlvH5,videoM3u8H5 ,LiveVideo},
  data() {
    return {
      list: [
--- a/src/pages/index/soil-monitoring.vue
+++ b/src/pages/index/soil-monitoring.vue
@ -71,6 +71,7 @@
 					</view>
 				</view>
 			</view>
+			<template v-if="loadingType!=0">
 			<!-- 电导率 -->
 			<view class="chart_section">
 			  <view class="top_box">
@ -82,7 +83,9 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					v-if="loadingType!=0"
 					type="area"
+					:loadingType="loadingType"
 					:opts="opts"
 					:chartData="chart_conductivity"
 				  />
@ -99,6 +102,8 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					v-if="loadingType!=0"
+					:loadingType="loadingType"
 					type="area"
 					:opts="opts"
 					:chartData="chart_humidity"
@ -116,6 +121,8 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					v-if="loadingType!=0"
+					:loadingType="loadingType"
 					type="area"
 					:opts="optsc"
 					:chartData="chart_temperature"
@ -133,6 +140,8 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					v-if="loadingType!=0"
+					:loadingType="loadingType"
 					type="area"
 					:opts="opts"
 					:chartData="chart_k"
@ -150,6 +159,8 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					v-if="loadingType!=0"
+					:loadingType="loadingType"
 					type="area"
 					:opts="opts"
 					:chartData="chart_n"
@ -167,12 +178,15 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					v-if="loadingType!=0"
+					:loadingType="loadingType"
 					type="area"
 					:opts="opts"
 					:chartData="chart_p"
 				  />
 			  </view>
 			</view>
+		</template>
 		</view>
 		<!-- 设置预警值 -->
 		<u-popup v-model="warningShow" border-radius="28" width="94%" height="70%"
@ -223,6 +237,7 @@
 		components: { QiunDataCharts },
 		data() {
 			return {
+				loadingType:1,
 				optsc:{},
 				opts: {
 					dataLabel:false,//显示数据
@ -327,7 +342,6 @@
 			},
 			//地区
 			change(val){
-				console.log(val);
 				let narray = this.deviceAddressList.filter(item=>{
 					return item.value==val;
 				})
@ -429,8 +443,10 @@
 					if(data.code==200){
 						let _data = data.data;
 						if(_data.length==0){
+							this.loadingType = 0
 							return this.$u.toast('没有关联基地');
 						}
+						
 						for(let item of _data){
 							item['label'] = item.name;
 							item['value'] = item.id;
@ -458,6 +474,7 @@
 						if(_data.length==0){
 							// return this.$u.toast('监测点为空');
 						}
+				
 						let options = [];
 						for(let k in _data){
 							let item = {};
--- a/src/pages/index/water-quality.vue
+++ b/src/pages/index/water-quality.vue
@ -69,6 +69,7 @@
 					</view>
 				</view>
 			</view>
+			<template v-if="loadingType!=0">
 			<!-- 氯 -->
 			<view class="chart_section">
 			  <view class="top_box">
@ -80,6 +81,7 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					:loadingType="loadingType"
 					type="area"
 					:opts="opts"
 					:chartData="chart_chlorine"
@ -97,6 +99,7 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					:loadingType="loadingType"
 					type="area"
 					:opts="opts"
 					:chartData="chart_conductivity"
@ -115,6 +118,7 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					:loadingType="loadingType"
 					type="area"
 					:opts="opts"
 					:chartData="chart_oxygen"
@ -132,6 +136,7 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					:loadingType="loadingType"
 					type="area"
 					:opts="opts"
 					:chartData="chart_ph"
@ -149,6 +154,7 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					:loadingType="loadingType"
 					type="area"
 					:opts="optsc"
 					:chartData="chart_temperature"
@ -166,12 +172,14 @@
 				</view>
 			  <view class="cart_box">
 				  <qiun-data-charts 
+					:loadingType="loadingType"
 					type="area"
 					:opts="opts"
 					:chartData="chart_turbidity"
 				  />
 			  </view>
 			</view>
+		</template>
 		</view>
 		<!-- 设置预警值 -->
 		<u-popup v-model="warningShow" border-radius="28" width="94%" height="70%"
@ -222,6 +230,7 @@
 		components: { QiunDataCharts },
 		data() {
 			return {
+				loadingType:1,
 				optsc:{},
 				opts: {
 					dataLabel:false,//显示数据
@ -429,6 +438,7 @@
 					if(data.code==200){
 						let _data = data.data;
 						if(_data.length==0){
+							this.loadingType = 0
 							return this.$u.toast('没有关联基地');
 						}
 						for(let item of _data){
--- a/yarn.lock
+++ b/yarn.lock
@ -5899,6 +5899,11 @@ highlight.js@^10.7.1:
  resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz"
  integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==

+hls.js@^1.4.12:
+  version "1.4.12"
+  resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.4.12.tgz#2022daa29d10c662387d80a5297f8330f8ef5ee2"
+  integrity sha512-1RBpx2VihibzE3WE9kGoVCtrhhDWTzydzElk/kyRbEOLnb1WIE+3ZabM/L8BqKFTCL3pUy4QzhXgD1Q6Igr1JA==
+
 hmac-drbg@^1.0.1:
  version "1.0.1"
  resolved "https://registry.npmmirror.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
@ -8049,6 +8054,11 @@ ms@2.1.3:
  resolved "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz"
  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==

+mui-player@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/mui-player/-/mui-player-1.8.1.tgz#3c0405eefeee46bfcd9535165bd022bb871bf8dd"
+  integrity sha512-5o0SnSyVImxT9XUO6jCMmcJ+ZyAEJeFvdeZDHHPNS/LdwhzWX4yQPNgx8nzRbcUJ749xpqEQ6uVddiexLyvvqg==
+
 multicast-dns-service-types@^1.1.0:
  version "1.1.0"
  resolved "https://registry.npmmirror.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz"
@ -8131,7 +8141,7 @@ negotiator@0.6.3:
  resolved "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz"
  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==

-neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
+neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1, neo-async@^2.6.2:
  version "2.6.2"
  resolved "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz"
  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
@ -9922,6 +9932,13 @@ sane@^4.0.3:
    minimist "^1.1.1"
    walker "~1.0.5"

+sass-loader@^13.3.2:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.3.2.tgz#460022de27aec772480f03de17f5ba88fa7e18c6"
+  integrity sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==
+  dependencies:
+    neo-async "^2.6.2"
+
 sass@^1.43.4:
  version "1.66.1"
  resolved "https://registry.npmmirror.com/sass/-/sass-1.66.1.tgz"
Author	SHA1	Message	Date
ihzero	a15069b782	修改直播	2023-11-23 15:00:25 +08:00
ihzero	447675f580	修改直播	2023-11-23 14:26:00 +08:00
ihzero	bcceb7c34e	修改bug	2023-11-22 21:20:53 +08:00