FE-V2-XCX/pages/alarmInfo/alarmInfoMonitor.vue

<!-- 停用 -->
<template>
    <view class="monitor">
		<view class="monitor_n">
			<scroll-view class="scroll1" scroll-x="true">
					<view :class="currentTab==index ? 'select' : 'select1'" v-for="(item,index) in barNameList" :key="index" :data-current="index" @click="ontabtap(item,$event)">
						{{item.name}}
					</view>
			</scroll-view>

			<view class="monitor_n_b">
				<video
				    v-for="(item,index) in urlList" :key="index" :id="urlList.id" :src="item.url"
				    :poster="videoCover"
				    :custom-cache='false' :autoplay="true" :controls="true"
				    :enable-danmu="false" :muted="true" :show-fullscreen-btn="true"
				    :show-center-play-btn="false" :show-play-btn="false"
				    @error="videoErrorCallback" >
				</video>
			</view>
		</view>
	</view>

</template>

<script>
	import { config,} from '@/api/request/config.js'
    import {GetStartList} from '@/api/index.js'
    export default {
        data() {
            return {
				videoCover:uni.getStorageSync('videoCover'),
				currentTab: 0,
				form:{

				},
				urlList:[],
				barNameList:[
					{
						name:'楼道监控1',
					},
					{
						name:'实验室监控1',
					},
					{
						name:'实验室监控1',
					},
					{
						name:'实验室监控1',
					},
					{
						name:'实验室监控1',
					},
					{
						name:'实验室监控1',
					},
				],

            }
        },
        onLoad(option) {
			this.GetStartList();
        },
        onShow(){

        },
		methods:{
			//点击tab切换
			ontabtap:function(item,e) {
				var _this = this;
				if (this.currentTab === e.target.dataset.current) {
					return false;
				} else {
					this.currentTab = e.target.dataset.current
				}
				// this.hardware.forEach(function(item,index){
				// 	if(data.id==item.id){
				// 	  _this.jinanGetStartList(_this.hardwareNUM[index])
				// 	}
				// })

			},
			//查询摄像头地址(交大)
			async GetStartList(deviceIds){
			  let obj = {
				page:'1',
				count:'1',
				//deviceIds:deviceIds
				deviceIds:'4401020049200000000100209'
			  };
			  const {data} = await GetStartList(obj);
        if(data.code == 200){
          let list = [];
          for(let i=0;i<data.data.length;i++){
            let text = uni.getStorageSync('cameraUrl');
            let url = data.data[i].hls;
            url = url.split("rtp/");
            let newUrl = text+'rtp/'+url[1];
            let obj = {
              id:data.data[i].deviceID,
              url:newUrl,
            }
            list.push(obj)
            console.log("obj",obj)
          }
          this.urlList = list;
        }
			},
		},

	}
</script>

<style lang="stylus" scoped>
    .monitor{
        height:100%;
        width:100%;
		display:flex;
		flex-direction:column;
		.monitor_n{
			width:710rpx;
			margin: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx 22rpx 40rpx;
			box-sizing: border-box;
			.scroll1 {
					width: 100%;
					white-space: nowrap;
					border-bottom: 1px solid #e0e0e0;

					& view {
						white-space: normal;
						display: inline-block;
						height: 60rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 60rpx;
						margin-right: 34rpx;
					}
					& view:first-child:before {
						display: none;
					}

					.select {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #0183FA;
						line-height: 60rpx;
					}

					.select1 {
						color: #333333;
					}
				}
			.monitor_n_b{
				width: 666rpx;
				height: 347rpx;
				margin-top: 16rpx;
				overflow-y scroll;
				video{
				  width:666rpx;
				  height:347rpx;
				}
			}
		}
	}
	/deep/.input-value-border{
		display :none !important;
	}
</style>