123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- <!-- 停用 -->
- <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 {jinanGetStartList} 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.jinanGetStartList();
- },
- 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 jinanGetStartList(deviceIds){
- let obj = {
- page:'1',
- count:'1',
- //deviceIds:deviceIds
- deviceIds:'4401020049200000000100209'
- };
- const {data} = await jinanGetStartList(obj);
- if(data.code == 200){
- let list = [];
- for(let i=0;i<data.data.length;i++){
- let text = 'https://lab.sxitdlc.com/jinandaxue/stream/';
- let url = data.data[i].result.body.data.hls;
- url = url.split("rtp/");
- let newUrl = text+'rtp/'+url[1];
- let obj = {
- id:data.data[i].result.body.data.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>
|